Question

我想根据多种条件设置背景颜色。我目前

<td [ngStyle]="{'background-color': mod.tyle=='main' ? 'red' : 'black'}">{{mod.tyle}}</td>

我想改变所以mod.tyle = high我想要红色或者如果mod.tytle = low想要黄色别的无或白色背景。如何添加多个条件？

Answer 1

在组件类中声明一个属性，如下所示：

export class YourComponent {    
  public get backgroundColor() {
    switch(mod.tyle) {
      case 'high': return 'red';
      case 'low': return 'yellow';
      default: return 'white';
    }
  }
}

在模板中使用此属性：

<td [ngStyle]="{'background-color': backgroundColor}">{{mod.tyle}}</td>

Answer 2

Component.ts

getColor(mycolor: number): string {
    switch (mycolor) {
      case 1: return '#EE6E73';
      case 2: return '#44C0FF';
      case 4: return '#D99415';
      case 5: return 'green'
    }
  }

Component.html

 <table *ngFor="let mod of tyles">
        <td [style.background-color]="getColor(mod.tyle)"></td>
</table>

角度2/4背景颜色多种条件

2 个答案: