Как добавить изображение в столбец таблицы Angular Material?

Question

Я использую таблицу угловых материалов.Я хотел иметь значок перед текстом флага в этом столбце, или как добавить столбец с иконками?по какой-то причине я не вижу, как это можно сделать.Пока мой код:

component.ts

export interface PeriodicElement {
  date: string;
  action: string;
  mileage: string;
  author: string;
  flag: string;
}

  const ELEMENT_DATA: PeriodicElement[] = [
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
];

  displayedColumns: string[] = ['date', 'action', 'mileage', 'author', 'flag'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

HTML

<ng-container matColumnDef="flag">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Flag</th>
        <td mat-cell *matCellDef="let element" class="status">{{element.flag}} </td>
</ng-container>

Answer 1

Это так же просто, как добавление дополнительного свойства к вашей модели данных, например icon:

export interface PeriodicElement {
  date: string;
  action: string;
  mileage: string;
  author: string;
  flag: string;
  icon: string;
}

Установка свойства для любого значка, который вы хотите (отметьте значки здесь ):

const ELEMENT_DATA: PeriodicElement[] = [
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late", icon: "flight_land"},
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late", icon: "flight_land"},
  {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late", icon: "flight_land"},
];

И затем использовать его в столбце вашего флага:

<td mat-cell *matCellDef="let element" class="status"><mat-icon>{{element.icon}}</mat-icon>{{element.flag}}</td>

Здесь - это простой стек, основанный на примере таблицы угловых материалов сзначок, отображаемый на основе свойства icon, определенного для данных таблицы.