根据值更改图标颜色

Question

我是Angular2的新手，我想知道如何根据值有条件地更改图标的CSS。

在HTML中：

<li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</li>

types包含很多1-3的整数范围。

在ts：

switch(p) {
    if(p==0) {...} //return color red
    if(p==1) {...} //return color blue
    if(p==2) {...} //return color green
}

这对我来说似乎不起作用。

Answer 1

Switch在其体内使用了缺少的案例。其他方式是使用函数绑定（这不是首选）但找不到任何其他解决方案。

[style.color]="color(types)"


color(p) {
    if(p==0) {return 'green'} 
    if(p==1) {return 'red'} 
    if(p==2) {return 'blue'} 
}

但是：ku zxsw指出

Answer 2

https://plnkr.co/edit/zQ79mbS2U3X1s9ktnTIR?p=preview

Answer 3

已经回答了另一种可能的方法。

对于一组有界的小值，您也可以在[ngClass]中执行此操作。它看起来像

   <li>
        <i class="fa fa-check" [ngStyle]="{'color': switch(types)}"> 
            {{types}}
        </i>   
   </li>


switch(p) {
    if(p==0) {return 'red'} 
    if(p==1) {return 'blue'} 
    if(p==2) {return 'green'} 
}

这是有效的，因为值是独立的。您还必须在css文件中声明新类。

[ngClass]="{'red':types === 0,
  'blue':types === 1,
  'green':types === 2}"

这应该减少每次运行时重新计算布局时必须调用方法的开销。这种方法可能就是我用来举例的方法。对于更复杂的标准或更大的值集，我可能会使用函数调用方法。

Answer 4

你可以这样做：

.red{
   color:red;
    }
.green{
   color:green;
 }
.blue{
   color:blue;
 }

希望这可以帮助

EDIt：按照建议删除了

<li><i class="fa fa-check" [ngStyle]="changeCSS(types)"></i>{{ types }}</li>


      changeCSS(types:any){
    let style:any;
      if(types == 0){
        style={
          'background':'..',
          'border-color':'....',
          'border-bottom': '...',

        }
    }
return style;
}