如何在Angular的CDK拖拽列表中删除列表项？

核心问题分析 #

你遇到的TypeError大概率是父子组件通信不当或上下文绑定错误导致的：

• Item子组件无法直接操作父组件ItemList的任务数组，强行操作会导致this指向异常或数组引用未定义
• 若未通过@Output事件通知父组件执行删除，子组件内的删除逻辑可能因无法访问父组件数据而报错

分步修复代码 #

1. 子组件Item：通过@Output触发删除事件

修改Item组件TS，定义输出事件传递要删除的任务项，不要在子组件内直接处理删除逻辑：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CdkDrag } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  standalone: true,
  imports: [CdkDrag]
})
export class ItemComponent {
  @Input() task: any; // 接收父组件传入的单个任务
  @Output() remove = new EventEmitter<any>(); // 定义删除事件

  triggerRemove() {
    this.remove.emit(this.task); // 触发事件，传递当前任务给父组件
  }
}

修改Item组件HTML，绑定点击事件到triggerRemove：

<div class="task-item" cdkDrag>
  <span>{{ task.content }}</span>
  <button (click)="triggerRemove()">删除</button>
</div>

2. 父组件ItemList：接收事件并执行删除

修改ItemList组件TS，实现removeTask函数处理子组件传来的删除请求：

import { Component } from '@angular/core';
import { CdkDropList, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { ItemComponent } from './item/item.component';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  standalone: true,
  imports: [CdkDropList, ItemComponent]
})
export class ItemListComponent {
  tasks = [
    { content: '任务A' },
    { content: '任务B' },
    { content: '任务C' }
  ];

  onDrop(event: CdkDragDrop<any[]>) {
    moveItemInArray(this.tasks, event.previousIndex, event.currentIndex);
  }

  removeTask(targetTask: any) {
    // 找到目标任务的索引并从数组中移除
    const taskIndex = this.tasks.findIndex(task => task === targetTask);
    if (taskIndex !== -1) {
      this.tasks.splice(taskIndex, 1);
    }
  }
}

修改ItemList组件HTML，绑定子组件的remove事件到父组件的removeTask：

<div cdkDropList (cdkDropListDropped)="onDrop($event)" class="task-list">
  <app-item 
    *ngFor="let task of tasks" 
    [task]="task"
    (remove)="removeTask(task)"
  ></app-item>
</div>

关键排查要点 #

• 若控制台仍报Cannot read property 'emit' of undefined，检查子组件是否正确声明@Output，且父组件是否正确绑定事件
• 确保父组件的tasks数组是可修改的引用类型，避免使用不可变对象导致视图不更新
• 若使用非独立组件，需在模块中正确声明和导入Item、ItemList组件

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