离子3条件下的颜色变化答案

【问题标题】：color change on condition in ionic 3离子3条件下的颜色变化
【发布时间】：2019-03-12 11:40:02
【问题描述】：

我想根据条件更改颜色。我显示卡片背景必须根据条件更改的 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>

它将在循环结束时更新满足条件的颜色

提前致谢

【问题讨论】：

你想使用颜色属性吗？那我给你简单的逻辑
是的@KhurshidAnsari
你为什么不使用 [ng-class] 代替？

标签： javascript html css ionic-framework ionic3

【解决方案1】：

简单使用：

<div [color]="item.userType == 'private' ? 'primary' : 'secondary'"> 
Dynamic color 
</div>

【讨论】：

我没有太多时间正确地编写整个代码。这是您的简单解决方案
如果我有超过 3 个条件怎么办
尝试在组件中使用 switch case 并将其与颜色属性绑定。

【解决方案2】：

NgStyle 指令可让您设置给定的 DOM 元素样式属性。

[ngStyle]="{'background-color':user.userType === 'private' ? 'green' : 'red' }"
NgClass 指令允许您为 DOM 元素动态设置 CSS 类。

[ngClass]="{'text-success':user.userType === 'private'}"
您也可以创建自己的自定义函数，例如

[ngStyle]="{'color':getColor(user.userType)}"

【讨论】：