Angular 角度材质表动态列
我已经创建了mat table组件,它通过我粘贴的数据生成动态列,但没有动作图标Angular 角度材质表动态列,angular,angular-material,Angular,Angular Material,我已经创建了mat table组件,它通过我粘贴的数据生成动态列,但没有动作图标 <table mat-table [dataSource]="data" class="mat-elevation-z8"> <ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index&qu
<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>
item.columnDef==='action'
和渲染垫图标时检查此循环*ngFor=“let item of columns;”
{{item.header}}
//如果item.columnDef==‘action’,则为mat图标
//else{{element[item.columnDef]}
{{icon.icon}
所以我做出了这个决定。它对我来说很好
<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>
{{item.header}}
//*如果列不是操作列,则渲染普通列
{{item.header=='ID'?matPaginator.pageSize*matPaginator.pageIndex+i+1:element[item.columnDef]}
//*在“操作”列中呈现操作,例如,可以编辑或删除
{{action.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>
<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>