javascript - 离子3条件下的颜色变化
问题描述
我想根据条件更改颜色。我显示卡片背景必须根据条件更改的 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>
它将在循环结束时更新满足条件的颜色
提前致谢
解决方案
NgStyle
指令允许您设置给定的 DOM 元素样式属性。[ngStyle]="{'background-color':user.userType === 'private' ? 'green' : 'red' }"
NgClass
指令允许您为 DOM 元素动态设置 CSS 类。[ngClass]="{'text-success':user.userType === 'private'}"
您也可以创建自己的自定义函数,例如
[ngStyle]="{'color':getColor(user.userType)}"
推荐阅读
- multithreading - 为什么 CNiButton 不能从除主线程之外的线程更改?
- r - 在R中按日期添加索引列
- java - 从文件 Java 8 中读取行并介于两者之间的最佳方法
- r - 将 foverlaps 与 POSIXct 对象一起使用时遇到问题 - 可能是由于小数秒?
- python - 以数据集为中心
- r - 迭代数据表中的相同行
- python - 在python中创建模型时得分错误
- django - django {%url%} 用于 {%include%}
- json - @ModelAndView 在 ui 中按预期工作,但在邮递员发送 json 请求时没有
- python - 只有类方法的类