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

Question

在例如下面的示例中，实现ngFor内的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 =“”。.创建一个布尔变量并在单击时对其进行更改。

链接到文档