我创建了一个mat-table组件,它根据我粘贴的数据生成动态列,但没有操作图标。
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index">
<th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
<td mat-cell *matCellDef="let element">{{ element[item.columnDef] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
数据通过Input()从另一个组件粘贴。
columns: Column [] = [
{columnDef: 'faculty_id', header: 'ID'},
{columnDef: 'faculty_name', header: 'Faculty'},
{columnDef: 'faculty_description', header: 'Description'},
{columnDef: 'action', header: 'Actions', actions: [
{type: tableActionsType.Edit, icon: 'edit', matTooltip: 'Edit'},
{type: tableActionsType.Delete, icon: 'delete', matTooltip: 'Delete'}
]}
];
我需要什么:
我想生成带有图标的列 Actions,
-
问题:
我需要在此循环中检查 *ngFor="let item of columns;
当 item.columnDef === 'action'
时渲染 mat-icon
<ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index">
<th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
<td mat-cell *matCellDef="let element">
// if item.columnDef == 'action' then mat-icon
// else {{ element[item.columnDef] }}
<mat-icon aria-hidden="false" aria-label="edit" *ngFor="let icon of item.actions" [matTooltip]="icon.matTooltip" (click)="check()">{{icon.icon}}</mat-icon>
</td>
</ng-container>