Angular中如何根据状态值改变表格单元格文本颜色？

错误原因 #

1. 变量作用域错误：你尝试给<tr>添加[ngClass]时，误用了<option>循环内的局部变量estatus，而外层<tr>的循环变量是contr，根本无法访问到estatus，导致样式完全不生效。
2. 样式作用对象错误：仅给<option>加[ngClass]只能改变下拉展开后选项的颜色，选中状态的文本颜色受<select>或其父元素<td>的样式控制，所以需要针对这两个元素设置样式。

修正步骤 #

1. 修复模板语法错误 #

先修正HTML里的语法问题：将<td>{{contr.comentario}</td>改为<td>{{contr.comentario}}</td>（缺少闭合的}}）。

2. 给包含下拉框的<td>绑定动态样式 #

直接根据当前行的contr.cveEstado给<td>绑定颜色类，选中的文本会继承<td>的颜色，同时同步下拉选项的样式：

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">ESTADO</th>
      <th scope="col">COMENTARIO</th>
      <th scope="col">HORA INICIO</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let contr of control">
      <td>{{contr.id}}</td>
      <!-- 给<td>绑定动态类 -->
      <td [ngClass]="{
        'text-red': contr.cveEstado === 'ERR',
        'text-blue': contr.cveEstado === 'INP',
        'text-orange': contr.cveEstado === 'PDD',
        'text-black': true
      }">
        <select class="select" (change)="onChangeList($event, contr)">
          <!-- 修正默认option的value为当前状态值，并同步样式 -->
          <option [value]="contr.cveEstado" [ngClass]="{
            'text-red': contr.cveEstado === 'ERR',
            'text-blue': contr.cveEstado === 'INP',
            'text-orange': contr.cveEstado === 'PDD',
            'text-black': true
          }">
            {{contr.cveEstado}}
          </option>
          <option *ngFor="let estatus of estadoModel" 
                  [value]="estatus.cveEstado" 
                  [ngClass]="{
                    'text-red': estatus.cveEstado === 'ERR',
                    'text-blue': estatus.cveEstado === 'INP',
                    'text-orange': estatus.cveEstado === 'PDD',
                    'text-black': true
                  }">
            {{estatus.descripcionEstado}}
          </option>
        </select>
      </td>
      <td>{{contr.comentario}}</td>
      <td>{{contr.horaInicio}}</td>
    </tr>
  </tbody>
</table>

3. 确保状态变更后样式同步 #

修改onChangeList方法，更新当前行的cveEstado值，这样选择新选项后，<td>的样式会自动更新：

onChangeList(event: Event, contr: any) {
  const select = event.target as HTMLSelectElement;
  // 更新当前行的状态值
  contr.cveEstado = select.value;
}

4. 可选：用组件方法简化模板代码 #

如果状态类型较多，模板里的对象语法会显得冗余，可以在组件类里添加一个方法返回对应类名：

getEstadoClass(cveEstado: string): string {
  switch(cveEstado) {
    case 'ERR': return 'text-red';
    case 'INP': return 'text-blue';
    case 'PDD': return 'text-orange';
    // 补充其他状态对应的类
    default: return 'text-black';
  }
}

模板可简化为：

<td [ngClass]="getEstadoClass(contr.cveEstado)">
  <select class="select" (change)="onChangeList($event, contr)">
    <option [value]="contr.cveEstado" [ngClass]="getEstadoClass(contr.cveEstado)">
      {{contr.cveEstado}}
    </option>
    <option *ngFor="let estatus of estadoModel" 
            [value]="estatus.cveEstado" 
            [ngClass]="getEstadoClass(estatus.cveEstado)">
      {{estatus.descripcionEstado}}
    </option>
  </select>
</td>

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