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

【问题标题】：how to write inline [ngStyle] for complex multiple conditions in angular2如何在angular2中为复杂的多个条件编写内联[ngStyle]
【发布时间】：2018-04-10 11:55:27
【问题描述】：

在这里，我想在 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>

【问题讨论】：

为什么要内联呢？只需将该逻辑放在组件类中并通过 get 访问器公开它。
我的要求是通过具有上述条件的内联 css。如果可以，请帮忙。
但是你为什么要内联写它？！这个要求从何而来？您最终会在模板中得到一个非常复杂的表达式，而这完全没有必要 - 可以通过其他更易读的方式实现相同的功能。
请不要一遍又一遍地重复同样的事情。 为什么？为什么特别是您想尝试将这一切都塞进模板中？你试过什么，它到底有什么问题？为什么不像 Günter 和我建议的那样只使用字段？
@ManzerHashmi 并不是你不想要最好的。这是您专门向这里的专家询问如何以可怕，糟糕的方式做事，并且拒绝给出合理的理由。在这里回答的人为他们所做的事情感到自豪，并且不会建议您以如此可怕的方式做事。所以你可以假设这是不可能的，然后继续解决一个真正的问题。

标签： angular ng-class ng-style

【解决方案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';
}

谢谢

【讨论】：