[英]How to put button to mat-table in Angular
我想将删除按钮或 Angular 垃圾桶图标放在 Angular 中的mat-table
中。 我怎样才能实现它? 我的工作表代码:
<mat-table #table [dataSource]="ELEMENT_DATA">
<ng-container cdkColumnDef="position">
<mat-header-cell *cdkHeaderCellDef fxFlex="40%">Position</mat-header-cell>
<mat-cell *cdkCellDef="let config" fxFlex="40%">{{config.position}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="name">
<mat-header-cell *cdkHeaderCellDef fxFlex="30%">Label</mat-header-cell>
<mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.name}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="weight">
<mat-header-cell *cdkHeaderCellDef fxFlex="10%">Order</mat-header-cell>
<mat-cell *cdkCellDef="let config" fxFlex="10%">{{config.weight}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="symbol">
<mat-header-cell *cdkHeaderCellDef fxFlex="10%">Symbol</mat-header-cell>
<mat-cell *cdkCellDef="let config" fxFlex="10%">{{config.symbol}}</mat-cell>
</ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let config; columns: displayedColumns;"
(click)="editConfig(config.id)"></mat-row>
您需要一个额外的列,例如:
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','deleteAction'];
并在 Mat-Table 中使用:
<ng-container cdkColumnDef="deleteAction">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let element"><i class="material-icons" (click)="delete(element)">delete</i>
</ng-container>
一个有效的StackBlitz Example
将此按钮添加到另一个 mat-cell。
<button class="btn btn-outline-secondary" (click)="delete()"> <i class="fas fa-trash-alt"></i></button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.