列表和自定义组件之间的角度材质拖放

Question

我正在使用有角度的材质，我想创建一个弹出窗口，在该弹出窗口中，我可以将元素从表格（带有搜索和分页）拖放到列表中。这是我目前拥有的：

表中的行是可拖动的，但这不会触发我列表上的drop方法。

代码：

<div class="grid-container">
<app-task-definition-list [enableDrag]="true" class="task-def-search"></app-task-definition-list>
<div cdkDropList (cdkDropListDropped)="drop($event)" class="temp-list">
    <mat-list>
        <div mat-subheader>Active tasks</div>
        <mat-list-item *ngFor="let taskDefinition of data.taskDefinitions">
            <mat-icon mat-list-icon>assignment</mat-icon>
            <div mat-line>{{taskDefinition.taskDefinitionKey}}</div>
        </mat-list-item>
      </mat-list>
</div>

在我的组件类中，我定义了drop方法来查看将什么作为事件传递，但是在将元素拖放到列表上时不会触发

drop(event: any) {
   console.log(event);
}

我在做什么错？在这种情况下（app-task-definition-list被定义为单独的组件），如何触发删除方法/将对象从表传递到列表？