时间戳

首页 > 解决方案 > 无法更改 Angular mat-table 列顺序

angular - 无法更改 Angular mat-table 列顺序

问题描述

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

<!-- 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 个图标作为表格的最后一列。任何想法来解决这个问题？

标签： angularangular-materialmaterial-designmat-table

解决方案

我没有使用 mat-table，但在这里快速浏览一下会告诉我顺序取决于行的定义。

<!--- 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]

推荐阅读