Angular 长期而言，比三元条件算子更好的方法？

对于这样的问题，有没有一种更简洁的解决方案

<tr [style.background]="level == 'ALARM' ? 'violet' : level == 'ERROR' ? 'orange' : level == 'WARNING' ? 'yellow' : 'white'">

---

成像我将有10个无法读取的级别。

一个简单的管道应该可以做到这一点

@Pipe({
  name: "mypipe"
  pure: true
})
export class MyPipe implements PipeTransform {
  public transform(level: string): string {
    return level == 'ALARM' ? 
    'violet' : level == 'ERROR' ?
    'orange' : level == 'WARNING' ?
    'yellow' : 'white'
  }
}

用法：

<tr [style.background]="level | mypipe">

<div [style.background]="level | levelPipe">Test</div>

---

您可以将所有值放入对象中，并使用键属性访问颜色

component.ts

colorMap = {
'ALARM': 'violet',
'ERROR': 'orange',
'WARNING': 'yellow',
'DEFAULT': 'white'
}

component.html

<tr [style.background]="colorMap[level]">

管道解决方案：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'levelPipe'
})
export class LevelPipe implements PipeTransform {

    transform(value: any, args?: any): any {
        return LevelsMap[value];
    }
}

export const LevelsMap = {
  ALARM: 'violet',
  ERROR: 'orange',
  WARNING: 'yellow',
  OTHER: 'white'
};

用法：

<tr [style.background]="level | mypipe">

<div [style.background]="level | levelPipe">Test</div>

测试

---

演示：

这里有一个管道就好了。很好，非常聪明谢谢@ThakurAmit