Angular material table 拖放列不会更新行

Question

有没有办法根据在列上拖放所做的更改来更新 Angular Material table 的数据源（行）？

我有一个更新列的 dropListedDrop 事件：

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.setDisplayedColumns();
  }
}

但是拖放操作完成后，dataSource 中的数据不会自动更改。

此处示例：StackBlitz

Answer 1

它提到 here Angular Material table 不会自动更新以优化性能。要更新 table，您只需在 table.

上调用 renderRows()

您可以像这样访问 table @ViewChild(MatTable) table: MatTable<any>; 然后调用 table.renderRows();

Answer 2

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.headers = [...this.headers];
  }
}

在线演示 HERE（即使您有 Angular 管道过滤器，此解决方案也有效）

Angular material table 拖放列不会更新行

Angular material table drag and drop columns doesn't update rows

angular

drag-and-drop

angular-material2

angular-material-table