网站搜索

angular - 在 *ngFor 循环中有条件地将 CSS 规则应用到元素上


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

我想实现给包含被选中复选框的 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>

答案#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>