Question

在一个视图中，我有一个组件，该组件正在使用Angular cdkDrag在仪表板上移动元素。

此组件的数据从父级（通过单向绑定）传递下来，该父级已订阅到SignalR集线器。

我遇到的问题是，在接收到有效负载后，如果任何元素已移动，则它们会重置回默认的UI布局（就像刷新页面一样）。

有办法阻止这种情况吗？

我是否需要将新位置存储在缓存中，并且在收到有效负载后，应用先前位置（来自缓存）？

下面是显示问题的StackBlitz。该项目的结构与我的相似： https://stackblitz.com/edit/angular-cdk-drag-columns-ldd9n2

Answer 1

所以我发现了这个问题，它似乎是Ng的行为，用于“重构” DOM。

详细信息可以在这里找到

基本上是为了解决该问题，我已将此问题添加到了html中：

<div *ngFor="let item of items; trackBy: trackByItems">
  ({{item.id}}) {{item.name}}
</div>

，并在components.ts中：

trackByItems(index: number, item: Item): number { return item.id; }

希望这会有所帮助。