html - 根据值更改图标颜色

Question

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

在 HTML 中:

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

类型包含很多整数，范围从 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。其他方法是使用函数绑定(bind)(这不是首选)但找不到任何其他解决方案。

[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