Angular CDK拖拽功能报错：无法绑定‘cdkDropListData’的解决方案

这个错误的核心原因是未正确导入CDK拖拽功能对应的模块，Angular Core包并不包含拖拽模块，需要单独导入DragDropModule，具体解决步骤如下：

• 确保已安装Angular CDK依赖（若未安装）：

  npm install @angular/cdk
  

• 在使用拖拽功能的模块（根模块或功能模块）中导入DragDropModule：

  import { NgModule } from '@angular/core';
  import { DragDropModule } from '@angular/cdk/drag-drop'; // 引入拖拽模块
  // 其他必要导入...
  
  @NgModule({
    declarations: [/* 组件声明 */],
    imports: [
      // 其他已导入模块...
      DragDropModule // 将模块添加到imports数组
    ]
  })
  export class YourModule { }
  

• 若使用懒加载模块，注意每个用到拖拽功能的懒加载模块都需要单独导入DragDropModule，仅在根模块导入无法覆盖懒加载场景。

• 确认模板中指令使用规范，示例模板代码：

  <div cdkDropList [cdkDropListData]="yourDataList" (cdkDropListDropped)="handleDrop($event)">
    <div *ngFor="let item of yourDataList" cdkDrag>{{ item.name }}</div>
  </div>
  

内容的提问来源于stack exchange，提问作者Zana Temel