如何在Angular中将按钮放到mat-table答案

【问题标题】：How to put button to mat-table in Angular如何在Angular中将按钮放到mat-table
【发布时间】：2018-12-04 16:05:32
【问题描述】：

我想将删除按钮或 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>

【问题讨论】：

标签： javascript html angular mat-table

【解决方案1】：

为此，您需要一个额外的列，例如：

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

【讨论】：

【解决方案2】：

将此按钮添加到另一个 mat-cell。

<button class="btn btn-outline-secondary" (click)="delete()"> <i class="fas fa-trash-alt"></i></button>

【讨论】：