angular - Εφαρμογή Κανόνων CSS υπό συνθήκη σε στοιχεία μέσα σε βρόχο *ngFor

Έχω μια λίστα που γεμίζει δυναμικά με αντικείμενα.

Θέλω να καταφέρω να προσθέσω ένα χρώμα φόντου στο 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>