Angular + Material Table - 如果我使用 un 管道过滤器，如何拖放行

Question

如果显示所有行，我的代码拖放操作没有问题，但如果我的 pipeFilter 隐藏删除的元素，我的拖放操作不起作用（实际工作但不显示）。如果我使用我的切换 2 次，我的显示是正确的。

我的模板：

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  [cdkDropListData]="dataSource"
  (cdkDropListDropped)="dropTable($event)">

....
</table>

如果你想重现问题，你可以在网上找一个Demo HERE。您拖放切换到 ON => Succes 然后拖放切换到 OFF => KO

注意：在我的样本中 Lithium 被删除了。

Answer 1

首先，我会删除 [cdkDropListData]="dataSource"，因为您已经从 [dataSource] 获得了数据。

由于某些奇怪的原因 this.table.renderRows(); 没有检测到更改，即使您的数组在拖放完成后已正确修改。为了强制发生这种变化，您可以这样做：

  dropTable(event: CdkDragDrop<PeriodicElement[]>) {
    const prevIndex = this.dataSource.findIndex((d) => d === event.item.data);
    moveItemInArray(this.dataSource, prevIndex, event.currentIndex);
    this.dataSource = [...this.dataSource];
  }

Stackblitz

Angular + Material Table - 如果我使用 un 管道过滤器，如何拖放行

Angular + Material Table - How to drag & drop row if I use un Pipe filter

drag-and-drop

angular-material

angular-pipe

angular

material-table