如何在表格中连续突出显示选定的 td？

Question

I have developed a table in Angular where all rows are highligted that have db-nr length 7 in the JSON. Now I would like to highlight not the whole row but certain tds in this row. Can you show me how this works?

My Code:

 // ********** 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

Use the ngStyle directive on the row in the html which checks the row id against a selected list and applies a style. Toggle the row ID with a list of rows that are selected using find() or something like this. The basic premise is to apply a style on the row according to a condition.

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