Angular 10如何根据行记录属性为整行设置指定背景颜色

你可以通过将条件样式绑定到<tr>行元素实现整行着色，以下是两种常用实现方式：

方式1：[ngClass] 绑定（推荐，样式与逻辑解耦） #

1. 先在 employee.component.css 中定义高亮样式类：

.qualified-row {
  background-color: green;
}

2. 修改employee.component.html的<tr>标签，绑定条件类：

<tbody>
  <tr 
    *ngFor="let record of employees"
    [ngClass]="{'qualified-row': !!record.qualification}"
  >
    <td>{{record.name}}</td>
    <td>{{record.designation}}</td>
    <!-- 移除原td上的bgcolor属性，若需要空值时占位可去掉*ngIf -->
    <td>{{record.qualification ?? '-'}}</td>
  </tr>
</tbody>

说明：!!record.qualification是将字段值转为布尔值，避免空字符串、0等假值误判。

方式2：内联样式直接绑定（无需额外CSS） #

如果不需要复用样式，可直接绑定行的背景色属性：

<tbody>
  <tr 
    *ngFor="let record of employees"
    [style.backgroundColor]="record.qualification ? 'green' : 'transparent'"
  >
    <td>{{record.name}}</td>
    <td>{{record.designation}}</td>
    <td>{{record.qualification ?? '-'}}</td>
  </tr>
</tbody>

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