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