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>

在Angular中动态更改类

1 个答案: