Angular Material表格下拉框选中变色：双NO时设为红色

我来帮你实现这个功能！核心思路是跟踪两个下拉框的选中值，当两者都为"NO"时，给对应的下拉框添加红色文本的样式。下面是具体步骤：

1. 完善模板的绑定与条件样式 #

首先，给你的两个下拉列（我假设另一个列是"Registered To Vote?"，你可以根据实际列名调整）的mat-select绑定选中值、变更事件，同时添加条件类：

<!-- 第一个下拉列：Eligible To Vote? -->
<ng-container matColumnDef="EligibleToVote">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Eligible To Vote? </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-form-field [class.app-input-no-underline]="true">
      <mat-select 
        [(value)]="element.eligibleToVote"
        (selectionChange)="onDropdownUpdate(element)"
        [class.red-selected-text]="element.eligibleToVote === 'NO' && element.registeredToVote === 'NO'"
      >
        <mat-option value="YES">YES</mat-option>
        <mat-option value="NO">NO</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-cell>
</ng-container>

<!-- 第二个下拉列：Registered To Vote? -->
<ng-container matColumnDef="RegisteredToVote">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Registered To Vote? </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-form-field [class.app-input-no-underline]="true">
      <mat-select 
        [(value)]="element.registeredToVote"
        (selectionChange)="onDropdownUpdate(element)"
        [class.red-selected-text]="element.eligibleToVote === 'NO' && element.registeredToVote === 'NO'"
      >
        <mat-option value="YES">YES</mat-option>
        <mat-option value="NO">NO</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-cell>
</ng-container>

2. 组件类处理变更（可选但推荐） #

在你的组件.ts文件里，添加一个方法来处理下拉框的变更事件——其实双向绑定已经会自动更新数据，但这个方法可以用来做额外的逻辑（比如保存数据）：

onDropdownUpdate(element: any) {
  // 这里可以加你需要的业务逻辑，比如把修改后的数据提交到后端
  // Angular的双向绑定已经会自动刷新视图，所以不用手动触发变更检测
}

3. 写CSS样式实现红色文本 #

最后在组件的样式文件（.scss或.css）里定义对应的样式类，选中mat-select内部的文本元素来改颜色：

.red-selected-text .mat-select-value-text {
  color: red !important;
}

小提示 #

• 我假设每行数据对象（element）有eligibleToVote和registeredToVote这两个属性来存选中值，你要根据自己实际的字段名替换哦。
• 如果你的两个下拉框是在同一列里的，只需要把条件判断[class.red-selected-text]="..."同时加到这两个下拉框上就行，逻辑是一样的。

这样设置后，只要两个下拉框同时选中"NO"，它们的选中文本就会变成红色啦！

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