无法更改 Angular mat-table 列顺序答案

【问题标题】：Cannot change Angular mat-table column order无法更改 Angular mat-table 列顺序
【发布时间】：2021-01-28 20:38:29
【问题描述】：

我在this 页面上使用材料mat-table 创建了一个基本列表，并且它可以正常工作。但是，当尝试将操作列移动到如下所示表格的末尾列时，第一列的顺序保持不变，这没有任何意义。

<!-- I move this just below the tr tags -->
<!-- action column -->
<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button>
      <mat-icon>remove_shopping_cart</mat-icon>
    </button>
  </td>
</ng-container>


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

我还想在 Actions 列中创建 3 个图标作为表格的最后一列。有解决问题的想法吗？

【问题讨论】：

标签： angular angular-material material-design mat-table

【解决方案1】：

我没有使用 mat-table，但快速查看 here 告诉我顺序取决于行的定义。

<!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

我认为您需要更改table.component.ts 中的顺序给this.displayedColumns = [...columnNames, this.rowActionIcon]

【讨论】：

如何在单列下创建多个图标？
您应该能够在<td> 中的当前按钮之后添加多个按钮，并将点击事件移动到按钮上而不是 td 组件上
当然，我添加了额外的mat-cell，这导致了问题。
您建议使用<mat-icon>delete</mat-icon> 还是<i class="material-icons">delete</i> ？你建议哪一个？后者没有 clickable 属性。
<td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)"> <button mat-button> <mat-icon>remove_shopping_cart</mat-icon> </button> <button mat-button> <mat-icon>delete</mat-icon> </button> </td> 这应该可以工作.. 您仍然需要将 click 属性从 td 移到按钮上