использование NG-CLASS внутри таблицы mat, ссылающейся на элемент "row" для объявления css

Question

У меня есть таблица с несколькими столбцами. Один из столбцов является полем состояния. Я хочу поместить цветные значки в этот столбец для статуса, который имеет запись. Я сделал их не кликабельными кнопками. Запись может иметь один из 3 статусов «Завершено», «Удалено» и «Отменено». Я не могу заставить его работать динамически, когда он загружается, чтобы установить цвета. Я видел много примеров, когда люди используют ng-класс, и я изо всех сил стараюсь его реализовать, или даже больше, чтобы сослаться на значение row.OrderStatus.

HTML

<!-- Status Column -->
<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef>Status</th>
  <td mat-cell *matCellDef="let row">
  <button ng-class="row.OrderStatus">{{row.OrderStatus}}</button>
  </td>
</ng-container>

CSS

.Completed{
  background: green;
}

.Cancelled{
  background: yellow;
}

.Deleted{
  background: red;
}

Answer 1

Это неправильный синтаксис для ngClass. Проверьте документы для правильного синтаксиса.

Это должно работать для вас.

<button [ngClass]="{'Completed': row.OrderStatus === 'Completed', 'Deleted': row.OrderStatus === 'Deleted', 'Cancelled': row.OrderStatus === 'Cancelled'}">
    {{row.OrderStatus}}
</button>