Условные операторы в стиле Ng не работают Angular 6

Question

ОБНОВЛЕНО

 <div style="margin-top: 10px; color: white; height: 50%; padding: 5%; font-size: 25px; font-weight: bold"
    [ngStyle]="{'background-color': global.timeSpent <= '10' ? 'LimeGreen' : ((global.timeSpent > '10' && global.timeSpent <= '20')  ? 'Gold' : 'Red' ) }">{{global.timeSpent}}</div>

Второй подход

<div [ngStyle]="styleColor"> {{global.timeSpent}}</div>                   
styleColor(){
this.global.timeSpentToStoryPointVariance = this.global.timeSpentToStoryPointVariance.split('%')[0]

if(this.global.timeSpentToStoryPointVariance <= '10') {
return  '{ "background-color": "LimeGreen" }';
}
else if(this.global.timeSpentToStoryPointVariance > '10' && this.global.timeSpentToStoryPointVariance <= '20'){
return  '{ "background-color": "Gold"}';
}
else{ 
return '{ "background-color": "Crimson" }';
}

}

Условия не работают должным образом.Оператор ' <= </strong>' работает неправильно, поскольку в среде IDE знак <</strong> красного цвета, а остальное синим даже> - также синего цвета.

Что здесь не так?

Answer 1

ngStyle должно быть внутри div. В вашем коде div закрыт. Пожалуйста, смотрите ниже:

<div [ngStyle]="{'background-color':global.timeSpent <= '10' ? 'LimeGreen' : ((global.timeSpent > '10' && global.timeSpent <= '20')  ? 'Gold' : 'Crimson' ) }">{{global.timeSpent}} </div>

Answer 2

с тех пор, как HTML-код становится настолько запутанным.попробуйте переместить логику в класс компонента

get styleColor(){

  if(this.global.timeSpent <= '10%') return  '{ "background-color": "LimeGreen" }';
  if(this.global.timeSpentToStoryPointVariance > '10%' && this.global.timeSpentToStoryPointVariance <= '20%') return  '{ "background-color": "Gold"}';
  return '{ "background-color": "Crimson" }';
}

, вызвать свойство из стиля

<div [ngStyle]="styleColor"

Answer 3

Вы используете слишком много кавычек. global переменная в вашем компоненте? Если так, то попробуйте это:

[ngStyle]="{'background-color': global.timeSpent <= 0.1 ? 'LimeGreen' : ((global.timeSpentToStoryPointVariance > 0.1 && global.timeSpentToStoryPointVariance <= 0.2)  ? 'Gold' : 'Crimson' ) }"

Я изменил ваш «10%» на 0,1, потому что я предполагаю, что вы хотите сравнить число, а не строку. Суть в том, что вы не должны заключать в кавычки то, что не является строками.

Хотя вам определенно не следует делать все это в html. потяните его в свой компонент как функцию, а затем ссылайтесь на него как [ngStyle]="getStyle()" или что-то в этом роде. Много чище.