Angular 6 7 8 - Перетаскивание + виртуальная прокрутка + Наблюдаемый

Question

Мне нужно, чтобы Drag&drop работал с виртуальной прокруткой. Источник данных моего 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

Вы должны передать данные в список [cdkDropListData]="items"

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