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

【问题标题】：Add icon as button in each row of angular material table在角材料表的每一行中添加图标作为按钮
【发布时间】：2020-09-21 08:09:37
【问题描述】：

我正在使用 Angular Material 版本 9.2.4 我有一个 html 表格。表格已正确显示。但我想在表格的每一行中添加一个图标作为按钮。表格数据来自休息 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>

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

我想在出生日期列之后显示删除图标。我错过了什么？

【问题讨论】：

您需要在displayedColumns 数组中包含deleteEmployee 列。列的显示顺序与displayedColumns 数组中的顺序相同。所以一定要把deleteEmployee放在合适的位置。
matColumnDef="deleteEmployee" 仅在后端响应中出现“deleteEmployee”时有效。但我没有这样的。
我只想在表格的每一行中包含一个图标
matColumnDef="deleteEmployee" is only valid when "deleteEmployee" will be present in the backend response. 不，这是不正确的。您可以添加任意数量的空新列。唯一的条件是它们必须存在于displayedColumns 数组中。如果您从后端获取此数组，则只需向其中添加一个新项目。

标签： angular angular-material

【解决方案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>

【讨论】：