驗證 HTML 表格單元格並使用 Javascript 更改背景顏色

Question

這是 HTML 表，我想以這樣的方式驗證它，如果用戶清除條目，特定單元格的背景顏色應該變為紅色。 model 的代碼應位於 JavaScript 或 Typescript 中。 請不要提供 jQuery 解決方案

app.component.html

  <table class="material-table">
    <thead>
      <tr>
        <th></th>
        <!-- <th *ngFor="let schema of tableSchema">
          {{ schema.field }}
        </th> -->
      </tr>
    </thead>
    <tr *ngFor="let rowData of tableData">
      <td value="Delete" (click)="deleteRow(rowData)">X</td>
      <td
        *ngFor="let schema of tableSchema"
        [class.red-text]="!rowData[schema.field].valid"
      >
        <span
          #el
          contenteditable
          (blur)="rowData[schema.field].value = el.innerText"
          
        >
          {{ rowData[schema.field].value }}
        </span>
      </td>
    </tr>
  </table>

Answer 1

您可以使用屬性指令：

JS

import { Directive, ElementRef, HostListener, KeyValueDiffers } from '@angular/core';

@Directive({
  selector: '[requiredHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  color = "red";

  @HostListener('input') onChange() {
    this.highlight();
  }

  private highlight() {
    const color = this.el.nativeElement.innerHTML ? null: this.color;
    this.el.nativeElement.style.backgroundColor = color;
  }
}

HTML 模板：

<td *ngFor="let schema of tableSchema">
   <span #el contenteditable requiredHighlight (blur)="rowData[schema.field].value = el.innerText" >
      {{ rowData[schema.field].value }}
   </span>
 </td>

Answer 2

使用NgClass 。

<td *ngFor="let schema of tableSchema" [ngClass]="{'red-text':!rowData[schema.field].valid}">
    <span #el contenteditable (blur)="rowData[schema.field].value = el.innerText">
        {{ rowData[schema.field].value }}
    </span>
</td>