单击关闭按钮时，Angular 2隐藏父元素 [英] Angular 2 hide parent element on click on close button

问题描述

我是Angular2的新用户，我想在单击关闭图标后隐藏父元素.下面是我的代码:

I am new in Angular2, I want to hide parent element after clicking on the close icon. Below is my code:

@Component({
    selector: 'add-search',
    template: `
      <input type='text' #newHero
        (keyup.enter)="addHero(newHero.value)"
        (blur)="addHero(newHero.value); newHero.value='' ">
      <button (click)=addHero(newHero.value)>Add</button>
    <div>
    <div [hidden]="hideElement" style="margin-right:2px" *ngFor="let hero of heroes" class="label label-primary">{{hero}}<span (click)="toggleElement()" style='cursor:pointer; display:inline-block; padding:1px 2px;'><i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i></span>
</div>
</div>
   `
})
export class AddSearchComponent {
    heroes = Array<string>();
    addHero(newHero: string) {
        if (newHero) {
            this.heroes.push(newHero);
        }
    }
    private hideElement: boolean = false;
    toggleElement() {
        if (this.hideElement) {
            this.hideElement = false;
        else
            this.hideElement = true;
    }
}
}

隐藏在代码中不起作用.我们能以简单的方式做到吗?还是最好的方法是什么?

Hide is not working in code. Can we do it in a simple way? or what will be the best approach?

推荐答案

<div [hidden]="hero.hideElement" style="margin-right:2px" 
     *ngFor="let hero of heroes" 
      class="label label-primary">{{hero}}

       <span (click)="hero.hideElement=!hero.hideElement"
              style='cursor:pointer; display:inline-block; padding:1px 2px;'>
              <i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i>
       </span>
</div>

// toggle is not possible.

OR

<span  *ngFor="let hero of heroes"  
        (click)="hero.hideElement=!hero.hideElement"
        style='cursor:pointer; display:inline-block; padding:1px 2px;'>   
        <i class="fa fa-times" aria-hidden="true" style="font-size:10px;"></i>

    <div [hidden]="hero.hideElement" style="margin-right:2px"          
          class="label label-primary">
          {{hero}}    
    </div>
</span>

// toggle is possible.

更新:

您不清楚使用的是 Array 还是对象数组. 因此，我为您提供了对象数组

You were not clear whether you are using Array or Array of objects. SO I gave you solution of Array of Objects

使用字符串数组，无法通过 * ngFor 循环隐藏元素.您所能做的就是拼接.

With string array, it is not possible to hide an element with *ngFor loop. All you can do is splice.

在此处检查两种方式.

http://plnkr.co/edit/fc7x4nCh6vFIbIL2IX4I?p=preview

http://plnkr.co/edit/fc7x4nCh6vFIbIL2IX4I?p=preview

这篇关于单击关闭按钮时，Angular 2隐藏父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！