Изменить цвет значка на основе значения

Question

Я новичок в Angular2, и я хочу знать, как изменить CSS значка условно на основе значений.

В HTML:

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

типа содержит множество целых чисел в диапазоне от 1-3.

В ц:

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

Это не похоже на работу для меня.

Answer 1

Коммутатор использует корпус в его корпусе отсутствует. Другой способ - использовать привязку функций (что не является предпочтительным), но не может найти другого решения.

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


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

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

Надеется, что это помогает

РЕДАКТИРОВАТЬ: удалил '' как это было предложено