Question

我正在使用Ionic和Angular构建应用程序。根据{{3}}，我有以下代码。

<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数据库中有食物，其结构如下：

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

如何为additem（list）和unlist（list）事件创建一个CSS切换，以便如果该对象出现在另一列中（或者根据它的“状态”将其灰显？），该对象将显示为灰色？

Answer 1

您可以添加ngClass以根据＆＃39;状态动态添加您想要的具有所需样式的css类：开/关＆＃39;值。

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

如何使用Angular和Ionic切换CSS？

1 个答案: