如何更新 Angular 中使用 *ngFor 迭代的所有项目的样式

Question

当单击列表外的按钮时，如何将样式应用于列表中使用*ngFor迭代的所有项目。

<button (click)="markAllAsChecked();">Mark All as Checked</button>
<ion-list>
  <div *ngFor="let item of items">
    <ion-item (click)="this.item.checked = !this.item.checked;">
      <div class="item" [ngStyle]="{background: item.checked ? 'green': 'red'}">
        {{item.name}}
      </div>
    </ion-item>
  </div>
</ion-list>

单击“全部标记为已检查”按钮时，我希望所有项目的背景颜色都变成绿色。

我使用 Stackblitz 创建了一个工作示例。 有人可以帮忙吗？

Answer 1

您需要迭代每个项目并checked为真。

markAllAsChecked(){
  this.items.forEach(item => item.checked = true);
}

如果你想在同一个按钮上切换背景颜色，

markAllAsChecked(){
      this.items.forEach(item => item.checked = !item.checked);
}

这是工作链接。

Answer 2

使用[ngClass]而不是[ngStyle]

 <div class="item redBackgroundClass" [ngStyle]="{'greenBackgroundClass': item.checked}">

这里的键是 CSS 类，当值中给定的表达式计算为真值时添加这些类，否则它们将被删除