html - Angular 在 ngFor 循环中切换 div

Question

<div *ngFor="let item of items">
  <div>Title</div>
  <div class="show-more" (click)="do something">Show more</div>
  <div class="extra-content">
    <p>lorum ipsum bla bla bla</p>
  </div>
</div>

如何通过单击 show-more div 元素来切换额外的内容 div。这对于集合中的每个项目必须是唯一的。

所以一个全局变量是不可用的，因为它会触发集合中的所有项目（同时）。

标签： htmlcssangular

Answer 1

show在 中添加一个新属性item，如下所示

items = items.map(item => ({...item, show: false}))

然后在点击时切换它。

<div *ngFor="let item of items">
  <div>Title</div>
  <div class="show-more" (click)="item.show = !item.show">Show more</div>
  <div *ngIf = "item.show" class="extra-content">
    <p>lorum ipsum bla bla bla</p>
  </div>
</div>

这将为每一行/项目设置唯一的项目显示