Wie kann ich CSS mit Angular und Ionic umschalten?

Question

Ich baue eine App mit Ionic und Angular. Ich habe den folgenden Code gemäß design layout given here.

<div id ="neededfoodnames" *ngFor="let list of lists; let i = index"> 

    <ion-item (click)="togglefoods(list.category)" *ngIf="lists[i-1]?.category != list.category" class="categoryList"> 
    {{list.category}} 
    <ion-icon item-right name="arrow-forward" *ngIf="list.category != currentCategory"></ion-icon> 
    <ion-icon item-right name="arrow-down" *ngIf="list.category == currentCategory"></ion-icon> 
    </ion-item> 

<div class="foodList" *ngIf="list.category == currentCategory" (click)="unlist(list)"> 
    <ion-grid> 
     <ion-row> 
     <ion-col> 
     </ion-col> 
     <ion-col> 
      We Need 
     </ion-col> 
     </ion-row> 
     <ion-row> 
     <ion-col class="offFoods"> 
      {{list.foodname}} 
     </ion-col> 
     <ion-col class="onFoods"> 
      {{list.foodname}} 
     </ion-col> 
     </ion-row> 
    </ion-grid> 
</div> 
</div> 

Ich habe Lebensmittel in einer Firebase-Datenbank mit der folgenden Struktur:

{ 
    "category" : "Meat", 
    "foodname" : "Chicken", 
    "state" : "on" 
} 

Wie kann ich einen CSS-Schalter für die additem (Liste) und fehlende oder (Liste) Ereignisse erstellen, so dass das Objekt ausgegraut, wenn es in der anderen Spalte vorhanden ist (oder es basierend auf seinem "Status" grau ausgraut?)

Answer 1

Sie können ngClass hinzufügen, um dynamisch die gewünschte CSS-Klasse hinzuzufügen, die die gewünschten Stile basierend auf dem ' Status: Ein/Aus-Wert.

<ion-row> 
    <ion-col class="offFoods" [ngClass]="{'grey-out': list.state !== 'on'}"> 
     {{list.foodname}} 
    </ion-col> 
    <ion-col class="onFoods" [ngClass]="{'grey-out': list.state !== 'on'}"> 
     {{list.foodname}} 
    </ion-col> 
    </ion-row> 

Dann CSS für die Klasse definieren .grey-out { color: gray; // or whatever color you choose } entsprechend in den Stilen.