我想根据条件更改颜色。 我显示n张卡片背景必须根据情况而改变的卡片。
users.map((item)=>{
if(item.userType == "private"){
document.documentElement.style.setProperty('--customcolor',"yellow");
}
else if(item.userType == "private"){
document.documentElement.style.setProperty('--customcolor',"blue");
}
});
:root {
--customcolor: red;
}
.oddmes {
background-color: var(--customcolor);
}
<ion-list><br/>
<ion-card class="oddmes" *ngFor="let user of users">
<ion-card-content >
<b>{{user.user_name}} </b>
<p>{{user.feedback}}</p>
</ion-card-content>
</ion-card>
</ion-list>
它将更新在循环结束时满足条件的颜色
预先感谢
答案 0 :(得分:1)
只需使用:
<div [color]="item.userType == 'private' ? 'primary' : 'secondary'">
Dynamic color
</div>
答案 1 :(得分:1)
NgStyle
指令使您可以设置给定的DOM元素样式属性。
[ngStyle]="{'background-color':user.userType === 'private' ? 'green' : 'red' }"
NgClass
指令允许您为DOM元素动态设置CSS类。
[ngClass]="{'text-success':user.userType === 'private'}"
您还可以创建自己的自定义函数,例如
[ngStyle]="{'color':getColor(user.userType)}"