无法更改 Angular mat-table 列顺序

Question

我使用本页mat-table面上的材质创建了一个基本列表，并且它的工作没有任何问题。但是，当尝试将操作列移动到如下所示的表 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>

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

Answer 1

我没有使用过 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]