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 上。

Angular 仅切换所选项目

Angular toggle only selected item

angular

angular11