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

您必须将数据传递到列表/artwork

[cdkDropListData]="items"

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

1 个答案: