使用@angular/cdk 进行拖放会为拖放提供错误的事件数据

如何解决使用@angular/cdk 进行拖放会为拖放提供错误的事件数据

我查看了 @angular/cdk 拖放示例，几乎所有示例都用于对列表进行排序并在不同列表中拖动项目。

我正在尝试实现一种文件文件夹类型的行为，其中您有一个项目列表（每个项目指定为 file 或 folder）并且您可以将列表中的一个或多个文件项拖放到同一列表中的文件夹项上...然后它移入其中（当然由 API 调用处理）。 >

因此，常规排序实现将不起作用（可排序列表中的项目在悬停时移开）。

我了解了一些关于 SO 的问题，并了解到每个项目都需要标记为 cdkDropList。所以，这是我到目前为止的实现：

<div *ngFor="let item of items"
  cdkDropList
  [cdkDropListData]="[item]"
  (cdkDropListDropped)="onDrop($event,item)"
>
  <div class="test" cdkDrag>[{{item.type}}] {{item.name}}</div>
</div>

然而，事件数据只有关于被拖动的项目（文件项目）的信息。在下面的代码中，event.prevIoUsContainer.data、event.container.data 和 item 都指向同一个对象 - 被删除的文件项。

onDrop(event: any,item: ItemData) {
  console.log('drop event = ',event);
  console.log('event.prevIoUsContainer.data = ',event.prevIoUsContainer.data);
  console.log('event.container.data = ',event.container.data);
}

谁能告诉我这里到底有什么问题？谢谢。

编辑：这是 stackblitz 中的复制：https://stackblitz.com/edit/angular-ivy-edaftg