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

Question

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

<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

将 matColumnDef 'deleteEmployee' 添加到 ts 文件中的显示列数组。

例如：

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>