角CDK拖放：嵌套下拉列表

Question

我正在尝试建立一个demo app，我可以在其中规划学生和他们的课桌。当一个教室有太多课桌时，我可以把它们放在另一个教室里。然后，我可以在所述课桌上计划学生。我使用cdkDropListGroup，因为教室的数量是动态的。

当我将一张有学生的课桌放在“未分配”学生列表中时，课桌仍保留在教室中，但学生按预期放入列表中。 但是，当我尝试将学生放在桌子上时，只允许将产品放在列表中的谓词不允许它们。但是，当我删除谓词时，学生会被丢弃在教室列表而不是课桌中......

与学生一起放下课桌可以正常工作：

将学生放到课桌上失败：

我需要帮助将学生专门放在桌子上而不是教室里，从而触发 dropStudent。

我认为将桌子的容器提高到更高的 Z-Index 可能会有所帮助，但这没有用。

参考：

• docs
• similar question stackoverflow
• Stackblitz example where I'm stuck

Answer 1

您需要在未分配的学生列表上使用cdkDropListConnectedTo 选项，并添加课桌列表的所有实例。这是因为 CdkDropListGroup 只查看兄弟列表，而不查看子列表：

你需要在你的桌面下拉列表中添加一个模板引用，这样你就可以在你的组件 ts 中查询这个，或者你可以使用一串 ID。我认为模板引用更通用，但为了举例，我将使用 id：

<div cdkDropList 
      id="{{studentList.listName}}" 
      [cdkDropListData]="studentList.student"
      class="example-list"
      (cdkDropListDropped)="returnStudent($event)"
      [cdkDropListEnterPredicate]="userReturnPredicate"
      [cdkDropListConnectedTo]="desks">
  <div  *ngFor="let person of studentList.student"
        class="example-box" 
        cdkDrag
        [cdkDragData]="person">
    {{person.userName}}
  </div>
</div>

如您所见，cdkDropListConnectedTo 绑定了desks。在您的组件中，您可以像这样定义办公桌：

desks: string[] = [];

this.desks = this.projectLists.map(
  (list) => list.products.map((product) => product.productName)
).flat(2);

要使其与ViewChildren 一起使用，您需要在ngAfterViewInit 中添加类似的内容：

ngAfterViewInit(): void {
  this.deskLists.changes.pipe(
    startWith(true),
    tap(() => {
      this.desks = this.deskLists.toArray();
      this.cd.markForCheck();
      this.cd.detectChanges();
    }),
  ).subscribe();
}

working example