angular - 角度切换仅选定项目

Question

我有一个动态创建的列表。单击时列表中的每个项目都会切换。

这是.html代码：

<ul *ngFor="let item of items">
    <li (click)="toggle($event)">{{text}}</li>
</ul>

和 .ts 代码：

toggle(event) {
    this.visible = !this.visible;
}

当我点击一个项目时，列表中的所有项目都会切换。

如何更改它以便只有单击的项目会切换？

Answer 1

我认为这不是“切换”的情况，因为一旦它不可见，你怎么能点击它？

无论如何，您可以将每个都<li>作为组件，并且每个visible都将处于不同的范围内。另一种方式，例如，您可以向item对象添加一个属性，visible然后每次单击都会根据需要更改值。

例如：

<ul *ngFor="let item of items">
    <li *ngIf="item.visible" (click)="item.visible = false">{{item.text}}</li>
</ul>

Answer 2

// make a global variable array
expandedItemIndexes = [] as any;
// Pass in an id you get from the html object
toggleItem(itemId): void {
  // Create a new variable that is an array
  
  if (this.expandedItemIndexes.includes(itemId)) {
    // if the index is included in the array of indexes, remove it
    this.expandedItemIndexes.splice(this.expandedItemIndexes.indexOf(itemId), 1);
  } else {
    // else push it into the array to expand the item
    this.expandedItemIndexes.push(itemId);
  }
}

在 HTML 中放置ngIf="expandedItemIndexes.includes(item.id)"要切换的 div。