Question

我正在使用Angular Material表。我想在该列中的标记文本之前添加一个图标，还是要添加带有图标的列？由于某种原因，我看不到如何做到这一点。到目前为止，我的代码是：

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;
}

将属性设置为所需的任何图标（选中图标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"},
];

然后在“标志”列中使用它：

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

Here 是基于Angular Material表示例的简单stackblitz 根据在属性icon上定义的属性显示一个图标表数据。

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

1 个答案: