如何更新 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 類，當值中給定的表達式計算為真值時添加這些類，否則它們將被刪除