Angular项目使用CdkDragDrop报错：属性无法识别与类型不匹配

解决步骤 #

1. 修正cdkDropListConnectedTo参数类型 #

cdkDropListConnectedTo属性要求传入字符串格式的DOM ID数组，现有代码中该参数为数字数组，和实际绑定的元素ID不匹配，是导致属性报错、拖拽关联失效的核心原因。
修改app.component.ts中ngOnInit的关联逻辑：

for (let island of this.islands) {
  for (let park of island.parks) {
    const connectedToTemp: string[] = [];
    for (let island2 of this.islands) {
      for (let park2 of island2.parks) {
        // 转换为字符串，和DOM元素的id属性值保持一致
        connectedToTemp.push(park2.id.toString());
      }
    }
    park.connectedTo = connectedToTemp;
  }
}

同步修改app.component.html中cdkDropList的id绑定，保证类型一致：

<div cdkDropList class="item-list" [id]="park.id.toString()" 
  [cdkDropListData]="park.dinosaurs"
  [cdkDropListConnectedTo]="park.connectedTo" 
  (cdkDropListDropped)="drop($event)">

2. 处理事件类型不匹配提示 #

如果修改后仍存在事件类型报错，属于Angular语言服务的模板类型检测bug，可二选一解决：

• 方案1：在tsconfig.json的compilerOptions中配置"strictTemplates": false，关闭模板严格类型检测
• 方案2：在模板中对事件参数做显式类型断言：

(cdkDropListDropped)="drop($event as CdkDragDrop<Dinosaur[]>)"

3. 清理缓存解决模块识别异常 #

如果仍提示cdkDropListData不是div的已知属性，按以下步骤重置缓存：

1. 关闭VS Code，删除项目根目录下的.angular缓存文件夹
2. 执行npm install重新安装依赖
3. 重启VS Code等待Angular语言服务加载完成

修改完成后启动项目，若恐龙可在任意园区之间正常拖拽移动、控制台无报错，说明问题已解决。

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