在角形材料表的每一行中将图标添加为按钮

Question

我正在使用9.2.4版角材料 我在html中有一个表格。该表已正确显示。但是我想在表的每一行中添加一个图标作为按钮。 表数据来自rest api，而我想在表的每一行中使用相同的图标（例如Delete图标）。

<mat-table [dataSource]="employeeData" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="phoneNumber">
  <mat-header-cell *matHeaderCellDef> PHONE NUMBER </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.phoneNumber}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="emailId">
  <mat-header-cell *matHeaderCellDef> EMAIL ID </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.emailId}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="dateOfBirth">
  <mat-header-cell *matHeaderCellDef> DATE OF BIRTH </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.dateOfBirth }} </mat-cell>
</ng-container>

<!-- Delete Column -->
<ng-container matColumnDef="deleteEmployee">
  <mat-cell *matCellDef="let element">
    <!-- <button mat-icon-button aria-label="Example icon button with a vertical three dot icon"> -->
      <mat-icon>delete</mat-icon>
    <!-- </button> -->
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

我无法获得删除图标。桌子看起来像这样

我想在出生日期之后显示删除图标。 我想念的是什么？

Answer 1

在ts文件中，将matColumnDef'deleteEmployee'添加到displayColumns的数组中。

例如：

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'deleteEmployee'];

和您的html文件

<!-- Delete Column -->
  <ng-container matColumnDef="deleteEmployee">
    <th mat-header-cell *matHeaderCellDef> Delete </th>
    <td mat-cell *matCellDef="let element">
       <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
        <mat-icon>delete</mat-icon>
      </button>
    </td>
  </ng-container>