在 Angular 中动态更改类

Question

我有一个使用 ngFor 指令动态呈​​现的列表。数据来自 SQL Lite 数据库。我正在尝试根据存在的数据将一个类附加到每个列表项。即，如果列表项是“费用”，则附加一个红色类，如果列表项是“收入”，则附加一个绿色类。我发现了一个类似的问题here，但它只检查真/假而不是确切的文本。

我的代码如下

<ion-item-sliding *ngFor="let expense of expenses; let i=index">
  <ion-item nopadding [ngStyle]="{greenClass: expense.type==='Income', redClass: expense.type==='Expense'}">
    <p>
      <span>Day of month: {{expense.day}}</span><br>
      Type: {{expense.type}}<br>
      Description: {{expense.description}}
    </p>
    <h3 item-end>
      Amount: R{{expense.amount}}
    </h3>
  </ion-item>
</ion-item-sliding>

Answer 1

您使用的是ngStyle 而不是ngClass。

<ion-item-sliding *ngFor="let expense of expenses; let i=index">
  <ion-item nopadding [ngClass]="{greenClass: expense.type==='Income', redClass: expense.type==='Expense'}">
    ...
  </ion-item>
</ion-item-sliding>