angular - Angular Material table dynamic columns
问题描述
I have created mat-table component which generate dynamic columns by data which i pasted, but without Action icons.
<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>
Data are pasted by Input() from another component.
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'}
]}
];
What i need:
I want to generate column Actions with icons,
-
Problem:
I need to check in this loop *ngFor="let item of columns;
when item.columnDef === 'action'
and render 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>
解决方案
So I came up with this decision. And it works fine for me.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index">
<th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="item.columnDef=='action'? true : false ">{{ item.header }}</th>
<ng-container *ngIf="!item.actions"> // *if column is not the action column then render normal column
<td mat-cell *matCellDef="let element; let i = index">{{ item.header =='ID' ? matPaginator.pageSize * matPaginator.pageIndex + i + 1 : element[item.columnDef] }}</td>
</ng-container>
<td mat-cell *matCellDef="let element" class="action-link">
// *rendering actions in the action column for instance it can be edit or delete
<mat-icon aria-hidden="false" [attr.aria-label]='action.aria_label' *ngFor="let action of item.actions" [matTooltip]="action.matTooltip" (click)="getEvent(action,element)">{{action.icon}}</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
推荐阅读
- windows - 通过 Electron 访问当前高亮文本
- php - 1 个模型中的 2 个查询 (CodeIgniter)
- javascript - 自将 ASP.NET 站点从 HTTP 更改为 HTTPS 后,自动完成/即时搜索结果框停止工作
- python - 将函数的输出保存在python的csv文件中
- vaadin - 在 UI 中单独加载组件
- oracle - Oracle XMLQuery - 显示带有两个 XML 节点的逗号分隔列表
- c# - ASP.NET.MVC 5 为控制器的操作添加权限
- vba - VBA 性能,应该使用什么命令来禁用/启用屏幕更新
- javascript - 数据更新时的 OwlCarousel 自动高度
- xml - 使用 xslt 将日期格式为 mmm yy 到 yymm