角度2或4或5 ng样式，具有2个以上的条件输出

Question

像angularjs 1.x如何实现超过2个条件的ngstyle？

Angularjs 1.x：

In[34]:
pd.cut(df['a'], bins=[0,3,7,11], right=True)

Out[34]: 
0     (3, 7]
1    (7, 11]
2    (7, 11]
3     (0, 3]
4     (0, 3]
5     (0, 3]
6     (0, 3]
7    (7, 11]
8     (3, 7]
9     (3, 7]
Name: a, dtype: category
Categories (3, interval[int64]): [(0, 3] < (3, 7] < (7, 11]]

角-2/4/5： 在下面的代码中，黑暗，黄金和绿色是typescrip中声明的变量。

<div ng-controller="MyCtrl">
 <p ng-style="cond1  ? { color:'green' } : cond2 ? {color: 'blue'} : cond3 ? {color: 'red'} : {color: ''}">Hello World!</p>
</div>

在此处获取错误，

Answer 1

如果你想要这样的东西，你最好不要打电话给方法。如果可能的话，您希望避免将大量逻辑放入模板中：

<button
  class="button"
  id="connection_status"
  [ngStyle]="colorCheck()">

然后该方法返回您需要的颜色。

colorCheck() {
  if (this.darked) {
    return {backgroundColor: 'darked'};
  }
}

甚至更好，因为他们都是你正在设置的同一个班级：

<button
  class="button"
  id="connection_status"
  [style.backgroundColor]="colorCheck()">

colorCheck() {
  if (this.green) {
    return 'green';
  }
  // etc
}

Answer 2

您也可以这样做：

<button class="button" id="btn_status" [ngStyle]="{'backgroundColor': darked || gold || green}">

组件：

darked = null;
gold = null;
green = null;

cond1() {
  if(true) 
    this.darked = 'black'
}