AngularとIonicを使用してCSSを切り替えるにはどうすればよいですか？

Question

IonicとAngularを使用してアプリを構築しています。私はdesign layout given hereのように次のコードを持っています。オブジェクトがあるように私は、AddItemメソッド（リスト）と非公開に（リスト）のためのCSSトグルを作成するにはどうすればよい

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

イベント：

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

は、私は次のような構造を持つFirebaseデータベース内の食品を持っています

Answer 1

ngClassを追加して、希望するスタイルを持つCSSクラスを動的に追加することができます。このCSSクラスは '状態：オン/オフ '値。

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

次に、スタイルに応じてクラス.grey-out { color: gray; // or whatever color you choose }のCSSを定義します。