无法更改 Angular mat-table 列顺序

Question

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

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

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

无法更改 Angular mat-table 列顺序

Cannot change Angular mat-table column order

material-design

angular-material

angular

mat-table