Angular 拖放可以与启用分页和排序的 mat-table 一起使用吗？

Question

我已经实现了一个解决方案，可以在两个带有数据源数组的垫表之间进行拖放。

当时我正在使用 Angular Material Schematics 中的代码作为放置函数，如下所示：

drop(event: CdkDragDrop<MyObject[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex);
  }
}

但是，当添加分页和排序并将数据源切换到

MatTableDatasource

时，拖放功能停止工作。

一般来说，是否可以在启用分页和排序的垫表上进行拖放操作？

Answer 1

事实证明，在启用分页和排序的垫表上拖放实际上是可能的。

简而言之，事件类型更改为 CdkDragDrop，并且您必须添加更多 .data 才能从

event.container.data

和

event.previousContainer.data

获取数据，因为它们包含在

MatTableDataSource

内。

我必须像这样更改放置功能：

drop(event: CdkDragDrop<MatTableDataSource<MyObject>, any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data.data, event.container.data.data, event.previousIndex, event.currentIndex);
    }
  }

如果有人有更多见解，请分享！