angular - 如何重新订购 Angular Material 表？

Question

目标:使用 Angular Material 创建一个可以使用 Angular 拖放修改的表格。

预期行为:表格应该在拖放时重新排序

当前行为:行是可拖动的，底层数据源的顺序会发生变化，但当行被放下时，它会快速回到其在表格中的原始位置。

看这个例子:

https://stackblitz.com/edit/drag-drop-reorder-mattable

如何解决/实现这个问题？

(此外，我不确定为什么它在 Stackblitz 中的样式如此糟糕。任何见解也将不胜感激)

编辑:我发现了一个 super hacky 的方法来让行以正确的顺序再次呈现，但这绝不是预期的实现方式。我只是将 t.renderRows() 放在 drop 事件处理程序之后执行。请参阅下面的完整行

<mat-table #t
  cdkDropList
  (cdkDropListDropped)="onListDrop($event); t.renderRows()" 
  [dataSource]="dataSource"
  class="mat-elevation-z8">
  ...
</mat-table>

编辑 2:我做了一个简单的重构来使用 rxjs，并且每个元素的第一个拖放重新排序效果很好。但是当我尝试移动一个已经移动过一次的元素时，我没有得到预期的行为。 Stackblitz 应用已更新。

Answer 1

您遇到的是angular/material2 issue #14056 “cdkDropList:event.previousIndex 不会在第二次移动时更新”。问题及其评论中详细介绍了深度克隆数据源的解决方法。

看看here在控制台日志(console.log(`Moving item[${event.previousIndex}] "${this.items[event.previousIndex]}"to index ${ event.currentIndex}`))

我将“项目 0”从索引 0 拖到索引 3。索引 0 处的项目移动到索引 3。✔️
我将“项目 0”从索引 3 拖到索引 1。索引 0 处的项目移动到索引 1。✖️
我将“项目 0”从索引 3 拖到索引 2。索引 0 处的项目移动到索引 2。✖️

event.previousIndex 在行被移动到不同的索引后错误地保持不变。