Angular 角度/cdk简单拖动不适用于带有ngFor的div

我需要用角形cdk拖拽一件物品。我已在应用程序模块中导入DragDropModule。我正在ngFor中应用cdkDrag

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

{{message}}

---

拖动未按预期工作，控制台中也未出现任何错误。拖动功能适用于普通div元素。

您应该向外部div添加

cdkDropList

，以及一个drop事件

component.html

{{message}}

组件。ts

drop（事件：CdkDragDrop）{
moveItemInArray（this.messages、event.previousIndex、event.currentIndex）；
}

除了客户的答案，我还必须做以下几点：

将以下内容添加到我的app.module.ts文件中：

import { DragDropModule } from '@angular/cdk/drag-drop';
...
imports:
[
    DragDropModule
]

将cdkDropListData参数添加到包含要排序的项列表的父元素：

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

---

从cdkDrag元素中删除
类
属性修复了我的拖放操作。
什么是moveItemInArray（），我得到了它。非常感谢。从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray}；删除
strong
标记，使div成为循环子级。然后将字体大小：700添加到div类中，以复制一个强类。他们应该在文档中提到这一点：/