Angular 在“选择元素”中选择后，如何更改单元格颜色？

我试图根据下拉菜单上选择的值更改表格中的某些单元格，下拉菜单中的这些值在表格的单元格内随机分配

每个单元格值都有一个指定的类，该类等于单元格中的值。我希望这样，当在下拉列表中选择该值时，与该值相关的单元格将改变颜色。到目前为止，我已经：

app.coponent.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 (ngModelChange)="value()">
    <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" class="{{ column }}">
                {{ column | uppercase }}
            </td>
        </tr>
    </thead>
</table>

（{colVal}}）cols和（{rowVal}）行

一个
两个
三
四
五

{{列|大写}}

app.component.ts：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
export class AppComponent {
   colVal: number;
   rowVal: number;
   randStr: string;
   randVal: any[] = [];
   tableData: any[] = [];
   randArr: any[] = ['One', 'Two', 'Three', 'Four', 'Five'];
   val: string;

getDataFromChild(data) {
  this.colVal = data.columns;
  this.rowVal = data.rows;
  this.getRnd();
}

  getDataFromChildTwo(data) {
    this.randVal = data;
    console.log(this.randVal);
}

  getRnd() {
    this.tableData = [];
    for (let i = 0; i < this.rowVal; i++) {

      const values = [];
      for (let j = 0; j < this.colVal; j++) {
        const randNo = Math.floor(Math.random() * 4);
        const storedVal = this.randArr[randNo];
        values.push(storedVal);
    }
    this.tableData.push(values);
    console.log(this.tableData);
  }
}
    value() {
     console.log(this.val);
   }
}

从'@angular/core'导入{Component，ViewChild，ElementRef}；
从'@angular/forms'导入{NgModel}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
colVal：数字；
rowVal：数字；
randStr：字符串；
randVal:any[]=[]；
tableData:任意[]=[]；
randArr:any[]=['1'，'2'，'3'，'4'，'5']；
val：字符串；
getDataFromChild（数据）{
this.colVal=data.columns；
this.rowVal=data.rows；
这个.getRnd（）；
}
getDataFromChildTwo（数据）{
this.randVal=数据；
console.log（this.randVal）；
}
getRnd（）{
this.tableData=[]；
for（设i=0；i

tl；dr-我想更改下拉列表中包含所选选项的单元格的颜色，我现在有点不知所措

模板：

<td style="border: 1px solid black;" 
    *ngFor="let column of row" 
    class="{{column}}" 
    [ngClass]="{'selected': column == val }">
        {{ column | uppercase }}
</td>

编辑

---

@离合器BLEU回答您的评论：

column==vall

使用

[（ngModel）]

完美地检查与单元格关联的每个

列

值是否等于绑定到

的

值！你能简单解释一下
列==val
部分在做什么吗？
td.selected {
  background-color: red;
}