更改ngFor循环中元素的值

Question

我遇到的情况是我在一组对象上循环，对于每个对象，我有一个按钮，当点击时应该将isActive的变量切换为true，但我希望这个特定于那个循环中的一个元素，目前我只能让它使所有元素都处于活动状态isActive是组件变量。

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

Answer 1

您可以将其绑定到项目本身，而不是引入类成员来保存每个项目的状态。按以下方式更改模板：

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

无需其他设置。