angular - 如何在金属拖放中获取拖动的项目数据

Question

我正在学习角度。我的第一个应用程序是 todolist。我正在尝试使用 nodejs 和 mongodb 来开发它。有 todos dos 和 dones 三个容器。当我将一个项目从 todos 拖到 dos 时，我想处理它的 id。我怎样才能做到这一点 ？

      drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
          transferArrayItem(event.previousContainer.data,
                            event.container.data,
                            event.previousIndex,
                            event.currentIndex);
        }

              ///TODO handle dragged item id,title or someinformation


      }

Answer 1

您可以像这样将数据传递给一个可拖动的项目：

<div cdkDrag [cdkDragData]="todo" *ngFor="let todo of todos"></div>

数据，在这种情况下，您的待办事项将在事件对象中可用。

drop(event: CdkDragDrop<string[]>) {
  console.log(event.item.data);
}