angular - 如何将 Angular Material 拖放与虚拟滚动相结合？

Question

我正在尝试将 Angular Material 的虚拟滚动与拖放相结合，但出于某种原因，当我尝试实现此功能时，它会恢复项目，而当我尝试拖放元素时，它不会工作。

这里是代码的总结

<cdk-virtual-scroll-viewport cdkDropList  itemSize="50" class="example-viewport">
  <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

如您所见，除了我替换了 *ngFor 之外，我没有做任何特别的事情。与 cdkVirtualFor因为docs告诉我:

*cdkVirtualFor replaces *ngFor inside of a <cdk-virtual-scroll-viewport>, supporting the exact same API as *ngFor.

我在这里附上了一个 stackblitz demo !那么，如何将拖放与虚拟滚动结合起来呢？

Answer 1

我能够使用 Angular 8 在虚拟滚动中进行拖放操作。

<cdk-virtual-scroll-viewport itemSize="10" class="viewport">
  <mat-chip-list
    class="mat-chip-list-stacked"
    cdkDropList
    [cdkDropListData]="items"
    (cdkDropListDropped)="drop($event)">
    <mat-chip *cdkVirtualFor="let item of items" cdkDrag>
      {{ item.name }}
    </mat-chip>
  </mat-chip-list>
</cdk-virtual-scroll-viewport>

出于某种原因，moveItemInArray 没有像 *ngFor 那样在 *cdkVirtualFor 中触发更改检测。因此，我将 this.auditItems = [...this.auditItems]; 添加到我的放置事件中，这似乎解决了这个问题。

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    this.items = [...this.items];
}

编辑

从 cdk 版本 14.2.0 开始，我无法制作结合我的答案和@ronenmiller 的工作版本。我创建了一个 stackblitz 来重现这个问题。似乎即使在使用 getRenderedRange 时，从 cdkDropListDropped 生成的索引也没有给出预期的结果。

Stackblitz Example