Angular Material拖放CDK删除列表中的元素

Question

如何删除列表项？ 我尝试从与列表关联的数组中删除该项目，但这完全破坏了列表。

我使用 Angular（带材质）9.0

Answer 1

我有 2 个列表。 当我将一个项目从第一个列表 (sequenceOfSlides) 拖到第二个 (listOfSlides) 时，我将其删除，然后从第二个列表到第一个列表复制它。 问题是我从与列表关联的数组中删除了元素，并完全替换了它。 使用@Eliseo，我开始从原始数组中删除元素而不更改指向它的链接。 模板：

 <div class="row" cdkDropListGroup> <div class="col-6"> <div id="sequenceOfSlidesElement" cdkDropList [cdkDropListData]="sequenceOfSlides" class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let item of sequenceOfSlides" cdkDrag> {{item.ruName}} </div> </div> </div> <div class="col-6"> <div id="listOfSlidesElement" cdkDropList [cdkDropListEnterPredicate]="noReturnPredicate" [cdkDropListData]="listOfSlides" class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let item of listOfSlides" cdkDrag> {{item.ruName}} </div> </div> </div> </div>

成分：

 drop(event: CdkDragDrop<ISlide[]>) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { if (event.container.id === 'sequenceOfSlidesElement') { copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } else { this.sequenceOfSlides.splice(event.previousIndex, 1); } } }