angular - 有条件地将 CSS 规则应用于 *ngFor 循环中的元素

Question

我有一个动态填充对象的列表。

我想实现向包含选中复选框的div添加背景颜色。

此外，我想在选中复选框时显示按钮。

<div *ngFor="let item of items" [ngClass]="classname: ifCheckboxChecked">
  <p-checkbox (onChange)="onCheckboxChecked($event)"></p-checkbox>
  <span>{{item.itemName}}</span>
  <div *ngIf="ifCheckboxChecked">
    <button></button>
    <button></button>
  </div>
</div>

Answer 1

最好的方法是将此“isChecked”属性添加到您的项目模型中。代码可能如下所示:

<div *ngFor="let item of items" [class.classname]="item.isChecked">
  <p-checkbox [(value)]="item.isChecked"></p-checkbox>
  <span>{{item.itemName}}</span>
  <div *ngIf="item.isChecked">
    <button></button>
    <button></button>
  </div>
</div>