angular - Aplică regulile CSS condiționat la elemente într-o buclă *ngFor

Am o listă completată dinamic cu obiecte.

Vreau să reușesc să adaug o culoare de fundal div-ului care conține caseta de selectare bifată.

În plus, vreau să afișez butoanele atunci când caseta de selectare este bifată.

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

Răspuns #1

Cea mai bună metodă posibilă ar fi să adăugați această proprietate „isChecked” la modelul elementului dumneavoastră. Codul ar putea arăta astfel:

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