Как изменить цвет мата-ячейки на основе ответа json в Mat-Dynami c -Table Angular?

Question

У меня есть динамическая c таблица матов, чтобы показать json ответ. Я хочу изменить цвет ячейки в зависимости от некоторых условий. Но, если я пытаюсь применить [ngStyle], он применяется для всей строки. Я хочу применить его только для конкретной ячейки ,

  <mat-table #table [dataSource]="dataSource">
    <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
      <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
      <mat-cell *cdkCellDef="let data" [ngStyle]="{'color': data.name == 'Boron' ? 'green':'red'}">{{ column.cell(data) }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

JSON структура:

     [ 
         {
          "col1":   {"name":"Boron","grade":A15},
          "col2":   [A15],
         },
         {
          "col1":   {"name":"Hydrogen", "grade":A28},
          "col2":   ["Hydrogen"],
         },
         {
           "col1":   {"name":"Helium", "grade":A56},
           "col2":   ["Helium","A56"],
         },
     ]

В этой структуре выше «col 1» - для отображения значений в таблице, а «col 2» - для изменения цветового кода конкретной строки

. Любая помощь будет принята с благодарностью !!!!

Answer 1

Вы можете сделать что-то вроде этого, изменить свой ngStyle на

[ngStyle]="{'color': data.name == 'Boron' && column.header == "your table header name where you want this color" ? 'green':'red'}"

Пример

В HTML

 <ng-container *ngFor="let column of columnsDef">
<ng-container [matColumnDef]="column.id">
  <th mat-header-cell *matHeaderCellDef> {{column.id}} </th>
  <ng-container *ngIf="!column.dynamicCellComponent">
    <td mat-cell *matCellDef="let element"  [ngStyle]="{'color':column.id=='position' && element.position==1 ? 'red':''}" > 
      {{element[column.id]}}
    </td>
  </ng-container></ng-container></ng-container>  

Надеюсь, это поможет!