在 ngFor 循环中更改元素的值

Question

我有一种情况，我正在循环处理一组对象，对于每个对象，我都有一个按钮，单击该按钮时应将 isActive 的变量切换为 true，但我希望它特定于只是循环中的一个元素，目前我只能让它激活所有元素，因为 isActive 是组件变量。

我创建了一个 plunkr，希望它能有所帮助 https://plnkr.co/edit/biOfbIjMxjOMUMFWOgyY?p=preview

Answer 1

无需引入 class 成员来保存每个项目的状态，您可以将其绑定到项目本身。更改模板如下：

  <ul>
    <li *ngFor="let item of list" [ngClass]="{'is-active': item.isActive}">
      <h2>{{ item.title }}</h2>
      <p>{{ item.body }}</p>
      <button (click)="item.isActive = !item.isActive">Toggle active</button>

      <div class="active" *ngIf="item.isActive">
        <small>This should show for only this object in the loop</small>
      </div>
    </li>
  </ul>

不需要额外的设置。

在 ngFor 循环中更改元素的值

Change a value of element in an ngFor loop

ngfor

angular