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 =“”。.創建一個布爾變量並在單擊時對其進行更改。

鏈接到文檔