Angular 2/4中如何基于多条件设置表格单元格背景色

我来帮你搞定这个多条件判断的问题，有两种常用的方式可以实现需求：

方法一：嵌套三元运算符（直接写在模板里） #

如果条件比较简单，直接在模板中用嵌套的三元表达式就能快速实现，代码如下：

<td [ngStyle]="{'background-color': mod.tyle === 'high' ? 'red' : mod.tyle === 'low' ? 'yellow' : 'white'}">{{mod.tyle}}</td>

逻辑很清晰：

• 当mod.tyle等于high时，背景色设为红色
• 否则如果等于low，设为黄色
• 其他所有情况都用白色；如果你想要无背景色，把'white'换成'transparent'（透明色）就行

方法二：抽取逻辑到组件类（更易维护） #

如果以后可能需要添加更多条件，或者想让模板更干净，建议把判断逻辑抽到组件的TypeScript代码里：

首先在组件类中定义一个方法：

getBackgroundColor(tyle: string): string {
  switch(tyle) {
    case 'high':
      return 'red';
    case 'low':
      return 'yellow';
    default:
      return 'white'; // 同样，换成'transparent'可实现无背景
  }
}

然后在模板中调用这个方法：

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

这种方式的好处是逻辑集中，后期修改或扩展条件时，只需要更新组件里的方法，不用动模板代码，可读性和维护性更好。

另外提个小细节：你的变量名tyle看起来像是style的笔误，如果是拼写失误记得修正哦～

内容的提问来源于stack exchange，提问作者J. Davidson