如何在 angular2 中为复杂的多个条件编写内联 [ngStyle]

Question

在这里，我想在 div 中传递一个条件，当它包含某个数字时显示某种颜色。

条件是：

      if (num >= -100.0 && num <= -35.0) {
          return '#f1403b';
        } else if (num > -35.0 && num <= 35.0) {
          return '#ffc200';
        } else {
          return '#34A853';
        }

app.component.html
---------------------
 <div  [ngStyle]="{'color': (num >= '-100.0' && num <= '-35.0' ) ? '#f1403b' : ( (num > '-35.0' && num <= '35.0') ? '#ffc200' :'#34A853')
}">
({{num}})
</div>

Answer 1

您好您可以在控制器中定义一个函数，该函数返回您需要的值。您可以在视图文件中使用它。下面我给出一个plunker链接。只是通过它。希望它对你有用。如果您对此有任何疑问，请告诉我。 https://plnkr.co/edit/lW1rP9VyCeqpS5QhGjJA?p=preview

代码：

<div [ngStyle]="{'color': colorGreen(), 'font-size': size + 'px', 'font-weight': 'bold'}">

Angular 2 Ng 样式示例

您可以在此处检查 if() 条件并返回颜色。

colorGreen = function(){
return 'green';
}

谢谢