Angular中如何根据下拉框选中值改变对应表格单元格颜色？

嘿，这需求其实很容易搞定，咱们利用Angular的ngClass指令和CSS就能实现动态高亮，下面是具体步骤：

1. 定义高亮样式 #

首先在app.component.css里添加选中单元格的高亮样式，你可以根据喜好调整颜色和样式：

/* 高亮样式示例：亮黄色背景+加粗文字 */
.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

2. 修改表格单元格的类绑定逻辑 #

原来的单元格只绑定了值作为类名，现在需要动态添加高亮类——当单元格的值和下拉框选中的值匹配时触发高亮。把模板里的<td>标签改成这样：

<td style="border: 1px solid black;" 
    *ngFor="let column of row" 
    [ngClass]="{ 
      [column]: true,  /* 保留原来的类名，不影响原有样式 */
      'highlight': column === val  /* 值匹配时自动添加高亮类 */
    }">
  {{ column | uppercase }}
</td>

这里[ngClass]会根据条件自动添加/移除highlight类，完美实现动态样式切换。

3. 修复下拉框选项的匹配问题 #

注意你原来的第三个选项value=" Three"前面有个空格，而randArr里是'Three'（无空格），这会导致选中Three时匹配不上单元格！赶紧把option的value改成和数组一致的：

<option value="Three">Three</option>

4. 可选：简化下拉框事件处理 #

你的(ngModelChange)="value()"方法目前只是打印日志，因为用了[(ngModel)]双向绑定，val会自动同步选中值，所以这个事件方法可以删掉，或者保留用来扩展其他逻辑。

修改后的完整代码示例 #

app.component.html #

<div style="text-align: center"> 
  <app-inputs (event)="getDataFromChild($event)"></app-inputs> 
  <p></p> 
  ({{ colVal }}) cols and ({{ rowVal }}) rows 
  <p></p> 
  <select [(ngModel)]="val"> 
    <option value="One">One</option> 
    <option value="Two">Two</option> 
    <option value="Three">Three</option> 
    <option value="Four">Four</option> 
    <option value="Five">Five</option> 
  </select> 
  <p></p> 
  <table style="border: 1px solid black;"> 
    <thead> 
      <tr style="border: 1px solid black;" *ngFor="let row of tableData"> 
        <td style="border: 1px solid black;" 
            *ngFor="let column of row" 
            [ngClass]="{ [column]: true, 'highlight': column === val }">
          {{ column | uppercase }} 
        </td> 
      </tr> 
    </thead> 
  </table> 
</div>

app.component.css #

.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

这样一来，当你选中下拉框里的任意值，表格中所有值匹配的单元格都会自动变成你设置的高亮样式啦！

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