Простое перетаскивание angular / cdk не работает для div с ngFor

Question

Мне нужно сделать элемент перетаскиваемым с помощью angular-cdk. Я импортировал DragDropModule в модуль приложения. Я применяю cdkDrag внутри ngFor.

<div *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong>{{ message }}</strong>
    </div>
  </div>

Перетаскивание не работает должным образом, также в консоли не появляются ошибки. Функция перетаскивания работает для обычных элементов div.

Answer 1

Вы должны добавить cdkDropList к внешнему элементу div, а также событие удаления.

Перетаскивание CDK .

component.html

<div cdkDropList (cdkDropListDropped)="drop($event) *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong>{{ message }}</strong>
    </div>
  </div>

component.ts

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.messages, event.previousIndex, event.currentIndex);
  }