Как я могу изменить цвет значка мат в таблице матов на основе значения в ячейке

Question

Как я могу указать цвет значка мат в таблице матов? У меня есть цвет с именем dflt, который является либо истиной, либо ложью, и я хочу отобразить либо зеленую галочку, либо красное закрытие. В моем коде в настоящее время я использую

<ng-container matColumnDef="dflt">
            <th mat-header-cell *matHeaderCellDef> Default </th>
            <td mat-cell *matCellDef="let element"> <mat-icon>{{element.dflt ? 'check' : 'close'}}</mat-icon>{{element.dflt}} </td>
          </ng-container>

, поскольку, если я хочу, например, изменить цвет на красный, мне придется использовать color = "warn" . Итак, как я могу указать другое изображение на основе значения, а также другой цвет? Я пробовал что-то подобное, но это не работает.

<td mat-cell *matCellDef="let element">{{element.dflt ? '<mat-icon color="warn">check</mat-icon>' : '<mat-icon color="primary">close</mat-icon>'}} </td> 

Answer 1

Вы можете просто использовать * ngIf в ячейке:

<ng-container matColumnDef="dflt">
  <th mat-header-cell *matHeaderCellDef> Default </th>
  <td mat-cell *matCellDef="let element"> 
    <mat-icon *ngIf="element.dflt" color="warn">check</mat-icon>
    <mat-icon *ngIf="!element.dflt" color="primary">close</mat-icon>
  </td>
</ng-container>

https://stackblitz.com/edit/mat-table-cell-icon-color?embed=1&file=app / table-example. html

Answer 2

Вы просто должны были поместить класс в ваш mat-icon так:

<mat-icon [color]="element.dlft ? 'warn' : 'green'">...</mat-icon>