Angular 如何重新订购角材料表？

目标：使用可使用角度拖放修改的角度材质创建表格

预期行为：拖放时表格应重新排序

当前行为：行是可拖动的，基础数据源的顺序会更改，但当删除行时，它会恢复到表中的原始位置

请参见此示例：

如何解决/实施这一问题

（另外，我不知道为什么Stackblitz中的样式如此糟糕。如果有任何见解，也将不胜感激）

编辑：我找到了一种非常简单的方法，可以让行以正确的顺序再次渲染，但这是不可能实现的。我只是将

t.renderRows（）

放在drop事件处理程序之后执行。请参阅下面的完整行

...

编辑2:

---

我用rxjs做了一个简单的重构，每个元素的第一次拖放重新排序非常有效。但是当我试图移动一个已经移动过一次的元素时，我没有得到预期的行为。Stackblitz应用程序已更新。

正如您在编辑中提到的，每次修改数据源时，确实需要调用

renderRows（）。角材料文档中甚至提到了它

根据表的最新数据集呈现行，该数据集为
直接作为输入提供或通过可观察到的
流（直接或来自数据源）。检查数据中的差异
自上次差异以来的数据，仅执行必要的更改
（添加/删除/移动行）

如果表的数据源是数据源或可观察的，则
每次提供的可观察流发出
新的数据阵列否则，如果数据是数组，则此函数将
需要调用以呈现任何更改。

要避免每次调用
renderRows（）
，您可以做的是将数据源转换为可观察的，并在
onListDrop（）
函数中发出一个新值，以便每次拖放一行时表都会自动更新。
您会遇到“cdkDropList:event.previousIndex不会在第二次移动时更新”. 本期及其评论中详细介绍了深度克隆数据源的解决方法

看看我在控制台日志（
console.log（`Moving item[${event.previousIndex}]“${this.items[event.previousIndex]}”到索引${event.currentIndex}`）中做了一个小改动后，在哪里玩演示程序。
）

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

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

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

事件。先前的索引
在移动到其他索引后错误地保持不变。
样式不佳是因为没有包含主题，只需添加
@import'@angular/material/prebuilded themes/deeppurple amber.css'（或任何其他主题）添加到您的styles.css。这是有意义的，它解决了样式设置问题。谢谢。我最终听从了你的建议，将数据源更改为可观察的（行为主体）。但我遇到了新问题。我已经更新了帖子。这似乎适用于简单的数据源，但当mat table源是可观察的时就不行了。如何将深度克隆与可观察到的对象一起使用？