我正在使用 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>
最佳答案
它就像向数据模型添加附加属性一样简单,例如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.
关于angular - 如何将图像添加到 Angular Material 表列中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54457907/