Angular 6 7 8 - 拖放 + 虚拟滚动 + Observable

Question

我需要让拖放与虚拟滚动一起使用。我的 VS 的数据源是可观察的。我试过这段代码，但它不起作用，VS列表没有变化，只是动画：

<ng-container *ngIf="observableData | async as items">
<cdk-virtual-scroll-viewport
    cdkDropList 
    #virtualScroller
    (cdkDropListDropped)="drop($event)">
    <mat-list>
        <mat-list-item 
            cdkDrag     
            *cdkVirtualFor="let item of items; let i = index; trackBy: trackByIdx">
            <h4 matLine cdkDragHandle>
                List item Title
            </h4>
            <p matLine cdkDragHandle>
                List item text
            </p>                
        </mat-list-item>
    </mat-list>
</cdk-virtual-scroll-viewport>

这是我的 ts 处理程序：

drop(event: CdkDragDrop<any[]>) {
     const vsStartIndex = this.virtualScroller.getRenderedRange().start;
     moveItemInArray( this.observableData.value, event.previousIndex + 
     vsStartIndex, event.currentIndex + vsStartIndex);
} 

如何使用 Observable 列表实现 d&d？

Answer 1

您必须将数据传递给列表[cdkDropListData]="items"

<cdk-virtual-scroll-viewport
cdkDropList
[cdkDropListData]="items"
#virtualScroller
(cdkDropListDropped)="drop($event)">