Angular Material表拖放列排序不起作用

Posted 2023-03-13

【中文标题】Angular Material表拖放列排序不起作用

【英文标题】：Angular Material table drag and drop columns with sorting not wroking

【发布时间】：2019-10-07 17:11:44

【问题描述】：

带排序的角度材料表无法通过拖放正常工作。

这是我到目前为止所得到的，它有点适用于在拖放后排序与特定列一起工作的地方。但仍然有奇怪的功能。

Stackblitz

我希望能够使用Material Table 的正常排序功能，同时能够拖放列。

【问题讨论】：

拖放在 stackblitz 上不起作用。我认为您的 stackblitz 需要一个主题（例如，将 @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 添加到 styles.css）和 hammerjs（import 'hammerjs'; in app.component.ts）

我已根据您的建议更新了 stackblitz。此外，如果您拖动列标题，然后它会拖动整个列，则不会拖动单元格。

顺便说一句，你就是那个男人。尚未找到该列的排序，并且您的 stackblitz 立即工作。如果您介意，我将其发布在他们的 github 上作为参考。 github.com/angular/components/issues/13776

【参考方案1】：

matSort 需要在 mat-table 元素上

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropListGroup matSort>

而不是ng-container

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropListGroup>
  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.field" matSort>

【讨论】：

谢谢，完全错过了它在 ng-container 中。