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

}

条件无法正常运行。我稀疏' <= '运算符无法正常工作，因为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

您使用了太多的引号。 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()"之类引用它。更清洁。

Answer 3

因为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"

Ng样式条件运算符不工作Angular 6

3 个答案: