我需要让拖放与虚拟滚动一起使用。我的 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?