Angular表格按性别字段动态设置行背景色的实现方法

核心问题是现有代码给循环渲染的<tr>标签写死了黄色背景的行内样式，优先级高于动态样式规则，导致所有行统一显示黄色。删除该固定样式后，通过Angular自带的属性绑定即可实现需求，两种常用实现方式如下：

方式1：内联样式绑定（快速实现） #

直接通过[style.backgroundColor]属性绑定，在模板中写三目运算判断性别字段值，返回对应背景色：

<!-- 替换原有写死style的<tr>标签即可 -->
<tr 
  *ngFor="let todo of todos" 
  [style.backgroundColor]="todo.gender === '男' ? 'green' : 'yellow'"
>

• 如果项目中性别字段存储的是英文值（如male/female），只需要把判断条件里的'男'替换为对应存储值即可，逻辑无需调整。

方式2：CSS类绑定（推荐，易维护） #

如果后续需要扩展行样式（比如改文字颜色、加边框等），用类绑定的方式更方便后续维护：

1. 首先在组件对应的样式文件中定义两个性别对应样式类：

.row-male {
  background-color: green;
}
.row-female {
  background-color: yellow;
}

2. 替换原有<tr>标签的固定样式，通过[ngClass]绑定动态类名：

<tr 
  *ngFor="let todo of todos" 
  [ngClass]="todo.gender === '男' ? 'row-male' : 'row-female'"
>

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