风格绑定动态，4种不同的颜色

Question

我想像这样设计我的表格：

我尝试使用此代码，但有两种颜色。

 <table *ngFor="let item of notif">
   <tr class="cell" [style.border-color]="item.alarmnr === 1 ? 'green' : 'red' ">
   </tr>
 </table>

但我需要4种或更多颜色。

我有4个警报，

 alarmnr = 1 --> red
 alarmnr = 2 --> blue
 alarmnr = 3 --> yellow
 alarmnr = 4  --> green

如何实施？你能告诉我任何想法吗？

日Thnx

Answer 1

尝试将ngClass用于此

<table *ngFor="let item of notif">
  <tr class="cell" [ngClass]="{'red': item.alarmnr === 1, 
   'blue': item.alarmnr === 2, 
   'yellow': item.alarmnr === 3,
   'green' : item.alarmnr === 4}">
  </tr>
</table

Answer 2

是的，你可以在ts文件中创建一个函数 并将逻辑上的类或样式返回给变量并使用该变量 到[style.border-color] ="yourvariable"

Answer 3

我建议你在组件中执行类似的功能：

getColorByAlarmnr(alarmnr: number) : string {
  switch(alarmnr){
    case 1 : return 'red';
    case 2 : return 'blue';
    case 3 : return 'yellow';
    case 4 : return 'green'
  }
}

并在html中：

 <table *ngFor="let item of notif">
   <tr class="cell" [style.border-color]="getColorByAlarmnr(item.alarmnr)">
   </tr>
 </table>

或者您可以使用正确颜色的键值对定义对象/地图：

let colors = {
  1:'red'
  2:'blue'
  3:'yellow',
  4:'green'
}

并在html中：

 <table *ngFor="let item of notif">
   <tr class="cell" [style.border-color]="colors[item.alarmnr]">
   </tr>
 </table>