根据值更改图标颜色

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 在它的正文中使用了 case，但它是缺失的。其他方法是使用函数绑定（这不是首选）但找不到任何其他解决方案。

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


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

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

Answer 2

   <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'} 
}

Answer 3

你可以这样做：

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

希望对您有所帮助

EDIt：已按照建议删除了 ''

Answer 4

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

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

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

之所以可行，是因为这些值是独立的。您还必须在 css 文件中声明新的类。

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

这应该可以减少每次运行时间重新计算布局时必须调用方法的开销。这种方法可能是我将用于您的示例的方法。对于更复杂的条件或更大的一组值，我可能会使用函数调用方法。

根据值更改图标颜色

Change icon color based on the value

html

css

typescript

ng-class

angular