angular - 如何将图像添加到 Angular Material 表列中？

Question

我正在使用 Angular Material 表。我想在该列中的标志文本之前有一个图标，或者如何添加带有图标的列？出于某种原因，我不知道如何做到这一点。到目前为止我的代码是:

组件.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;
}

将属性设置为您想要的任何图标(检查图标 here):

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"},
];

然后在您的 Flag 列中使用它:

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

Here is a simple stackblitz based on the Angular Material table example with an icon displayed based on the property icon defined on the table data.