离子3 ngfor与不同的CSS

Question

我正在循环一个数组列表，其中的对象包含一个键值为'isRead'：0/1，

以下是html代码：

  <button ion-item text-wrap *ngFor="let notice of notices" ng-style="{ 'background': notice.isRead=='1': ? '#DCF7E3': '#FFFFFF' }">
  <ion-avatar item-start>
    <img src="{{notice.imageUrl}}" style="border-radius:0px;">
  </ion-avatar>
  <h3 [hidden]="slang!='en'" style="color:#172845;">{{notice.msgEN}}</h3>
  <h3 [hidden]="slang!='zh'" style="color:#172845;">{{notice.msgTW}}</h3>
</button>

我的问题是我想使用“isRead”来获得不同的背景颜色，但现在它似乎不起作用，有人有想法吗？

Answer 1

避免使用内联样式，您可以更改类：

[ngClass]="{'class1': notice.isRead == 1, 'class2': notice.isRead == 0}"

然后在你的css文件中：

.class1 {
 background: #DCF7E3;
}
.class2 {
 background: #FFFFFF;
}

显然，您可以更改类名与目的更相关。