Question

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

我的模板：

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

....
</table>

如果您想重现该问题，可以在线HERE找到一个演示。拖放至 ON => 成功，然后拖放至 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-如果使用联合国管道过滤器，如何拖放行

1 个答案: