如何使用Angular Material拖放在嵌套组件之间拖动项目

Question

我有这样的结构：

<list-of-componnts cdkDropListGroup class = "list-of-components>
    <div *ngFor = let component of components cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="component.tasks">
        <divs styling panel-group>
              <component-header>
              <component-body>

然后在我的组件主体中：

<div *ngFor let task of tasks>
      <app-task>
      </app-task>
</div

和内部应用任务：

<div cdkDrag cdkDrag cdkDragBoundary=".list-of-components" cdkDragLockAxis="y"
    <some dives presenting data for example task.name>

我的问题是：当我试图拖动任务时，dropList似乎没有反应。我将ini放到了drop方法：

        if (event.previousContainer === event.container) {
console.log("nothing changed")
        } else {
            console.log("you moved between conteners")
        }
    }}

且该console.logs都没有被调用，有人可以帮我解决这个问题吗？我正在尝试从文档中实现以下示例中的内容：https://stackblitz.com/angular/gkojerbjmla?file=src%2Fapp%2Fcdk-drag-drop-disabled-sorting-example.html