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

问题描述

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

当时，我将Angular Material Schematics中的代码用于drop函数，如下所示：

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.currentIndex);
  }
}

但是，当添加分页和排序时，我将数据源切换为MatTableDatasource时，拖放功能停止工作。

通常，是否可以在启用分页和排序功能的mat-table上进行拖放操作？

解决方法

事实证明，拖放功能实际上可以在启用分页和排序功能的mat-table上工作。

简而言之，事件类型更改为 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.currentIndex);
    }
  }

如果还有其他见解，请分享！