Angular 13 Material CDK拖拽ngFor对象数组报类型不兼容错误

问题根因 #

触发该TypeScript类型报错的核心原因有两点：

• 直接复用了官方示例的拖拽事件处理逻辑，官方示例的拖拽数据源为字符串数组，因此事件参数默认写为CdkDragDrop<string[]>类型，和实际使用的自定义图片对象数组类型不兼容
• 初始化放置目标数组basket时未显式声明类型，TypeScript无法正确推导数组元素类型，进一步导致类型校验冲突

修复步骤 #

• 先定义和业务数据对齐的拖拽项类型，避免重复声明类型结构

// 与items数据结构完全匹配的类型定义
interface ImageDragItem {
  id: number;
  imgSrc: string;
  name: string;
}

• 给拖拽源、放置目标数组都显式声明对应类型，禁止依赖TS隐式类型推导

// 拖拽源数组
items: ImageDragItem[] = [
  {
    id: 0,
    imgSrc: 'https://via.placeholder.com/150/0000FF/808080',
    name: 'Color B',
  },
  {
    id: 1,
    imgSrc: 'https://via.placeholder.com/150/FF0000/FFFFFF',
    name: 'Color R',
  },
  {
    id: 2,
    imgSrc: 'https://via.placeholder.com/150/FFFF00/000000',
    name: 'Color L',
  },
];

// 放置目标数组，初始为空时必须显式标注类型
basket: ImageDragItem[] = [];

• 修改拖拽释放事件的处理函数，将参数类型替换为实际使用的数组类型，不要沿用官方示例的字符串数组类型

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<ImageDragItem[]>) {
  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
    );
  }
}

• 校验模板侧的拖拽配置
  • 确认两个cdkDropList容器的[cdkDropListData]分别正确绑定到items和basket
  • 若需要支持双向拖拽，给两个容器配置[cdkDropListConnectedTo]属性，绑定对方的容器id，避免拖拽交互逻辑异常

修复完成后类型校验即可通过，后续往basket里存入的拖拽项都会被TS校验为正确的图片对象类型，对接响应式表单时也不会出现类型问题。

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