Angular2在ngFor循环中绑定事件/ DOM

Question

在ng中完成切换div可见性的最佳方法是什么？如下例所示？每次单击都应该从同一次迭代中切换div可见性。问题实际上是如何正确绑定此事件/ DOM。

<div *ngFor="let hero of heroes; let i = index">
  <div [hidden]="?">Toggle my visibility</div>
  <div (click)="?">Click me</div>
</div>

Answer 1

我认为最好的解决方案是创建另一个具有可见性属性的数组。所以，一个数组（每个英雄在加载时可见）：

this.heroesVisibility = new Array(this.heroes.length).fill(true);

组件类中的函数：

public toggleVisibility(id : number) : void {
    this.heroesVisibility = !this.heroesVisibility;
}

然后在模板中：

<div *ngFor="let hero of heroes; let i = index">
  <div [hidden]="!heroesVisibility[i]">Toggle my visibility</div>
  <div (click)="toggleVisibility(i)">Click me</div>
</div>

Answer 2

使它成为* ngIf =“”..制作一个布尔变量并在点击时更改它。

Link to docs