Angular Material cdkDropListEntered 未触发

Question

我在我的 angular 和 .net 核心应用程序中使用 @angular/cdk/drag-drop 模块。我有多个带有 cdkDropListGroup 选项的 Accordion 列表，这样我就可以将列表中的一个项目移动到另一个列表中。

它在各种情况下工作正常，但有时不起作用，特别是当我尝试将项目移动到空列表时。这是演示:example project

我发现当 cdkDropListEntered 事件发生时，该项目被转移到目标列表中，而当这个事件没有发生时，项目就不会被转移。可能是什么问题？

注意:只有当我在 chrome 浏览器中打开开发者工具时它才有效。

Answer 1

1. 在 app.component.html 中替换下面的行和代码 ->

    <mat-list (cdkDropListDropped)="cdkDropListDroppedHandler($event)" cdkDropList  [cdkDropListData]="chapter.items">
   

使用下面的代码->

<mat-list (cdkDropListDropped)="cdkDropListDroppedHandler($event)" cdkDropList [cdkDropListData]="chapter.items" (cdkDropListEntered)="enter($event)">

1. 在 app.component.ts 中添加 enter 函数，如下所示 -

    enter(entered: CdkDragEnter<any>) {
        console.log('entered');
        console.log(entered);
    }
   

并在 app.component.ts 中导入 cdkDragEnter，如下所示

import { CdkDragEnter } from '@angular/cdk/drag-drop';

我在这里更新了“https://stackblitz.com/edit/angular-drop-lists-in-accordion-aizyvk?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component。 html”请检查