Angular Материал drag n drop 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);
      }
    }
  }