删除项目时未发出 cdkDropListDropped 事件答案

【问题标题】：cdkDropListDropped event not emitted when item is dropped删除项目时未发出 cdkDropListDropped 事件
【发布时间】：2021-08-26 22:30:14
【问题描述】：

我正在尝试在不从拖动列表中删除项目的情况下进行拖放。我遵循了一个示例Working demo 并尝试重现相同的示例。不幸的是，它不起作用，我发现发出了 cdkDropListDropped 事件。您可以在此链接中找到问题Problematic demo

我想像Working demo那样实现

请告诉我哪里错了。

【问题讨论】：

标签： angular-material angular-cdk-drag-drop

【解决方案1】：

我发现我必须将指令 cdkDropList 和 cdkDropListConnectedTo="drop-list" 从 ID 为 div1 的 div 移动到父 div 以便 HTML 变为：

<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
    <div id="div1" cdkDrag  *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>
    </div>
</div>

此时cdkDropListDropped 事件触发并调用itemDropped 函数。然后的问题是，以下行出现运行时错误：

copyArrayItem(
     event.previousContainer.data,
     event.container.data,
     event.previousIndex,
     event.currentIndex
);

从您的工作演示 StackBlitz 复制 itemDropped 方法后，它开始工作。请参阅this StackBlitz 进行演示。

【讨论】：