时间戳

首页 > 解决方案 > 在选择元素中选择后如何更改单元格颜色？

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>

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);
   }
}

tl;dr - 我想更改下拉列表中包含所选选项的单元格的颜色，我现在有点失落！

标签： angular

解决方案

模板：

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

和CSS：

td.selected {
  background-color: red;
}

编辑

@ClutchBleu 回答您的评论：column == vall检查column与单元格关联的每个值是否等于val绑定到<select>使用的值[(ngModel)]

推荐阅读