ionic3 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; 
} 

可以明显改变类名是更相关的目的。