Angular v14中CDK拖拽时previousIndex与currentIndex始终为0的问题求助

问题根源 #

核心问题是嵌套拖拽容器未正确绑定数组数据源，导致CDK无法识别列表项的实际索引，从而返回的previousIndex和currentIndex始终为0。此外，Angular v8到v14的版本升级后，CDK拖拽的上下文识别逻辑有所调整，原嵌套写法的兼容性问题被放大。

核心修复步骤 #

1. 绑定正确的数组数据源到拖拽容器 #

每个cdkDropList必须直接绑定到对应的数组（阶段的Item数组、Item的子项数组），而非嵌套对象。模板结构示例：

<!-- 阶段容器（Item层级） -->
<div class="stage" *ngFor="let stage of stages" 
     cdkDropList 
     [cdkDropListData]="stage.items" 
     (dropped)="handleDrop($event)"
     [cdkDropListConnectedTo]="getConnectedStageIds(stage)"
     [id]="stage.id">
  <!-- Item节点 -->
  <div class="item" *ngFor="let item of stage.items" 
       cdkDrag 
       [cdkDragData]="item">
    {{ item.name }}
    <!-- 子项容器 -->
    <div class="item-children" 
         cdkDropList 
         [cdkDropListData]="item.children" 
         (dropped)="handleDrop($event)"
         [cdkDropListConnectedTo]="[stage.id, item.id]"
         [id]="item.id">
      <div class="child-item" *ngFor="let child of item.children" 
           cdkDrag 
           [cdkDragData]="child">
        {{ child.name }}
      </div>
    </div>
  </div>
</div>

• [cdkDropListData]必须绑定到数组类型的数据源（如stage.items、item.children）
• 给每个cdkDropList绑定唯一[id]，确保跨容器拖拽的关联逻辑正常

2. 修正drop事件处理逻辑 #

不再依赖可能异常的索引值，而是通过数据源数组直接操作，同时处理层级转换：

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

handleDrop(event: CdkDragDrop<any[]>) {
  const draggedItem = event.item.data;
  const sourceArray = event.previousContainer.data;
  const targetArray = event.container.data;

  // 同一容器内拖拽：直接移动元素
  if (event.previousContainer === event.container) {
    moveItemInArray(targetArray, event.previousIndex, event.currentIndex);
    return;
  }

  // 跨容器拖拽：处理层级转换
  // 1. 从源数组移除拖拽项
  const sourceIndex = sourceArray.findIndex(i => i.id === draggedItem.id);
  sourceArray.splice(sourceIndex, 1);

  // 2. 判断目标层级，转换并插入到指定位置
  const isTargetStageLevel = targetArray === event.container.elementRef.nativeElement.closest('.stage').dataset['stageItems'];
  if (isTargetStageLevel) {
    // 子项转Item：移除父级关联
    delete draggedItem.parentId;
    targetArray.splice(event.currentIndex, 0, draggedItem);
  } else {
    // Item转子项：绑定父级ID
    const targetParent = event.container.elementRef.nativeElement.closest('.item').dataset['item'];
    draggedItem.parentId = JSON.parse(targetParent).id;
    targetArray.splice(event.currentIndex, 0, draggedItem);
  }
}

• 使用findIndex替代依赖异常的previousIndex，确保精准定位拖拽项
• 通过DOM节点判断目标层级，实现Item与子项的互相转换

3. 手动触发变更检测 #

如果拖拽后视图未更新，需在事件处理末尾手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

handleDrop(event: CdkDragDrop<any[]>) {
  // ...上述逻辑
  this.cdr.detectChanges();
}

关键注意事项 #

• 避免在*ngFor中使用复杂嵌套表达式绑定数据源，直接绑定数组变量
• 测试时优先验证同一容器内的拖拽索引是否正常，再扩展到跨容器、跨层级场景
• 确保所有拖拽项（Item/子项）都有唯一ID，方便查找定位

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