Дубликаты элементов при перетаскивании углового материала

Question

Есть ли способ в угловом материале предотвратить дублирование элементов в выпадающем списке? вот пример кода

https://stackblitz.com/edit/angular-xjex4y-43l7uh

Я пытаюсь проверить, существует ли уже элемент в массиве с event.currentIndex но это неверно, потому что иногда я получаю неправильное значение.

event.container.data.included(event.container.data[event.currentIndex])

В stackblitz мне нужно использовать.indexOf() вместо.included(), потому что что-то не работает

Answer 1

Вы можете проверить текущий элемент, используя previousIndex и проверьте, существует ли элемент уже или нет, если существует, затем верните как

 {
      let idx=event.container.data.indexOf(event.previousContainer.data[event.previousIndex]);
      if(idx != -1){
        return;//if item exist
      }
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }

рабочая демонстрация

Answer 2

по поводу вашего вопроса, чтобы удалить элемент при перетаскивании наружу, вы можете использовать «Вывод»cdkDragDropped. Событие возвращает объект типаCdkDragDropу которых есть недвижимостьisPointerOverContainer. Если это свойство имеет значение false, вы удаляете элемент «за пределы» списка cdk-drop-list.

      <div class="example-box" *ngFor="let item of done" cdkDrag 
        (cdkDragDropped)="dropped($event)" >{{item}}</div>

  dropped(event:any){
    if (!event.isPointerOverContainer)
      event.previousContainer.data.splice(event.previousIndex,1)
  }

Итак, краткое объяснение cdk-drop-list:

А cdk-drop-list это всего лишь "механика" для изменения вообще двух массивов (реально можно "перевозить" любые данные). Вы можете добавлять/удалять элементы в тот или иной массив, менять местами элементы в массивах или что-то еще.

1. В cdk-drop-list есть «данные»: обычно это массив, но может быть любой объект.
2. Внутри каждого списка cdk-drop-list у нас есть один или несколько элементов cdk-drag:, которые мы можем перетаскивать.
3. в cdk-droplist есть события, которые мы можем «перехватить»: например, cdkDropListDropped
4. в cdk-drag также есть события, которые мы можем «перехватить»: например, cdkDragDropped
5. В этих событиях аргументом (см. тип) является объект со свойствами. Многие из этих объектов имеют свойство cdk-drop-list, из которого можно перетаскивать: «container» и «previousContainer» (поэтому мы можем получить «данные», используя «container.data» и «previousContainer.data») и Таким образом, мы можем получить перетаскиваемый элемент previousContainer.data[previousIndex] и позицию, в которую он был перенесен.

С этими элементами можно делать что угодно