Question

我是Angular2的新手，我想在点击关闭图标后隐藏父元素。以下是我的代码：

@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;
    }
}
}

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

Answer 1

<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.

<强>更新：

您不清楚是否使用数组或对象数组。所以我给了你对象数组

的解决方案

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

在这里检查两种方式。

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

Angular 2隐藏父元素点击关闭按钮

1 个答案: