Angular 6 7 8-拖放+虚拟滚动+可观察

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);
} 

如何使用可观察列表实现d&d？

Answer 1

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

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