如何使用Angular和Ionic切換CSS？

我正在使用Ionic和Angular構建一個應用程序。根據design layout given here，我有以下代碼。如何使用Angular和Ionic切換CSS？

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

我有一個火力地堡數據庫結構如下食物：

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

如何創建爲的AddItem（列表）和不公開（名單）一個CSS切換事件，這樣的目標是如果它出現在另一列（或根據它的「狀態」灰顯）？

來源

2017-10-04 cfoster5

您可以添加ngClass來動態添加所需的具有所需樣式的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>

然後相應地在樣式中定義您的css類.grey-out { color: gray; // or whatever color you choose }。

來源

2017-10-04 19:57:05 amal

如何使用Angular和Ionic切換CSS？

回答

相關問題