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

当单击列表外的按钮时，如何将样式应用于使用

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

将所有标记为选中状态
{{item.name}

我想所有的项目背景颜色都变成绿色时，点击标记所有为选中按钮

---

我用Stackblitz创建了一个。有人能帮忙吗？

您需要迭代每个项目，并将

勾选为true

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

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

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

这是您需要迭代每个项目并将
选中的工作
设置为true

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

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

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

以下是使用
[ngClass]
代替
[ngStyle]

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



这里的键是当值中给定的表达式计算为真实值时添加的CSS类，否则它们将被删除
使用
[ngClass]
而不是
[ngStyle]

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



这里的键是当值中给定的表达式计算为真实值时添加的CSS类，否则它们将被删除
谢谢！出于性能原因，我使用了
.map
而不是
forEach
。下面是我所做的
this.items.map（item=>item.checked=true）谢谢！出于性能原因，我使用了
.map
而不是
forEach
。下面是我所做的
this.items.map（item=>item.checked=true）