如何在表格中連續突出顯示選定的 td？

Question

我在 Angular 中開發了一個表，其中 JSON 中所有 db-nr 長度為 7 的行都被高亮顯示。 現在我想強調的不是整行，而是這一行中的某些 td。 你能告訴我這是如何工作的嗎？

我的代碼：

 // ********** DATA TABLE ARRAYS **********//

  private beforeMonthsColumns: EditColumns[] = [
    { attribute: 'kagName', name: 'Erlöse / Kosten', object: null, disabledRanges: false },
    { attribute: 'kagNumber', name: 'KAG', object: null, disabledRanges: false }
  ];

  private monthColumns: EditColumns[] = [
    { attribute: '1', name: 'Jan', object: 'values', disabledRanges: true },
    { attribute: '2', name: 'Feb', object: 'values', disabledRanges: true },
    { attribute: '3', name: 'Mrz', object: 'values', disabledRanges: true },
    { attribute: '4', name: 'Apr', object: 'values', disabledRanges: true },
    { attribute: '5', name: 'Mai', object: 'values', disabledRanges: true },
    { attribute: '6', name: 'Jun', object: 'values', disabledRanges: true },
    { attribute: '7', name: 'Jul', object: 'values', disabledRanges: true },
    { attribute: '8', name: 'Aug', object: 'values', disabledRanges: true },
    { attribute: '9', name: 'Sep', object: 'values', disabledRanges: true },
    { attribute: '10', name: 'Okt', object: 'values', disabledRanges: true },
    { attribute: '11', name: 'Nov', object: 'values', disabledRanges: true },
    { attribute: '12', name: 'Dez', object: 'values', disabledRanges: true }
  ];

  private afterMonthsColumns: EditColumns[] = [
    { attribute: 'currentYear', name: '', object: 'values', disabledRanges: true },
    { attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false },
  ];

 public rowHighlightStyleColor(formControl: FormControl) {
    return formControl.value ? this.changeColorService.defaultStyles.firstDesignFontColor : null;
  }

  public rowHighlightBackgroundColor(formControl: FormControl) {
    return formControl.value ?  this.changeColorService.defaultStyles.firstDesignBackgroundColor : null;
  }

private loadData() {
...
if (null !== data && data && yearlyBwaResults && yearlyBwaResults !== null) {
          this.mandantKagIds = data.map((d) => d.mandantKagId);
          const rows = [];
          const bwaMonthData: string[] = [];
          const bwaNames = _.uniq(data.map((d) => d.kagName)) as string[];
          for (const n of bwaNames) {
            bwaMonthData[n] = data.filter((d) => d.kagName === n);
            if (bwaMonthData[n].length > 0) {
              // console.log('bwaMonthData:', bwaMonthData[n][0]);
              const row: any = { kagName: bwaMonthData[n][0].kagName, kagNumber: bwaMonthData[n][0].kagNumber, values: {}, note: '' };
              const dbNrStr = `${bwaMonthData[n][0]['db-nr']}`;
              row['highlight'] = (dbNrStr.length === 7); // Here I highlighted the rows
              // console.log('row:', row);
              rows.push(row);
            }
          }
          this.data = rows;
        }
...
}

Answer 1

在 html 中的行上使用ngStyle指令，該指令根據所選列表檢查行 ID 並應用樣式。 使用 find() 或類似方法選擇的行列表切換行 ID。 基本前提是根據條件在行上應用樣式。

<row [ngStyle]={ listOfSelected.find(it => it.id === row.id): 'classOnRow': 'noStyle' }</row>