Angular 5中如何为*ngFor渲染的表格行设置不同背景色

看起来你想给Angular表格里的每行根据车辆状态设置不同背景色，首先我得先提个小问题：你当前的HTML结构有点问题——<div>不能直接放在<tr>里面，因为<tr>的子元素只能是<td>或<th>，浏览器会把这个div解析到表格外面，导致布局错乱。先修正这个结构，然后再实现行颜色的功能。

把ngSwitch移到<td>内部，保证HTML结构符合规范：

<tr *ngFor="let car of cars">
  <td>{{car?.id}}</td>
  <td>{{car?.date | date : "short"}}</td>
  <td class="col" [ngSwitch]="car?.state">
    <span *ngSwitchCase="1">Sold</span>
    <span *ngSwitchCase="7">Repaired</span>
    <span *ngSwitchDefault>Out of stock</span>
  </td>
</tr>

方法一：使用[ngClass]绑定CSS类（推荐） #

这种方式把样式和逻辑分离，后续维护和扩展都更方便。

首先在你的CSS文件里定义对应状态的行样式：

/* 已售出状态的行：淡绿色 */
.sold-row {
  background-color: #d4edda;
}

/* 已修复状态的行：淡黄色 */
.repaired-row {
  background-color: #fff3cd;
}

/* 缺货状态的行：淡红色 */
.out-of-stock-row {
  background-color: #f8d7da;
}

然后有两种方式在模板里绑定类：

方式A：模板内直接判断（适合简单场景） #

<tr *ngFor="let car of cars"
    [ngClass]="{
      'sold-row': car?.state === 1,
      'repaired-row': car?.state === 7,
      'out-of-stock-row': car?.state !== 1 && car?.state !== 7
    }">
  <!-- 表格内容 -->
</tr>

方式B：组件内定义方法（适合复杂逻辑或状态较多的情况） #

在组件的.ts文件里添加一个方法，根据状态返回对应的类名：

getRowClass(state?: number): string {
  switch(state) {
    case 1:
      return 'sold-row';
    case 7:
      return 'repaired-row';
    default:
      return 'out-of-stock-row';
  }
}

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

<tr *ngFor="let car of cars" [ngClass]="getRowClass(car?.state)">
  <!-- 表格内容 -->
</tr>

方法二：直接绑定内联样式 #

如果只是简单的颜色设置，也可以直接用[style.backgroundColor]绑定：

在组件的.ts文件里添加方法：

getRowColor(state?: number): string {
  switch(state) {
    case 1:
      return '#d4edda';
    case 7:
      return '#fff3cd';
    default:
      return '#f8d7da';
  }
}

模板里使用：

<tr *ngFor="let car of cars" [style.backgroundColor]="getRowColor(car?.state)">
  <!-- 表格内容 -->
</tr>

推荐使用[ngClass]的方式，因为样式集中管理，后续修改或扩展状态时更方便。另外一定要先修正HTML结构，避免布局问题。

内容的提问来源于stack exchange，提问作者Samuel