angular CDK 拖放：嵌套下拉列表

Question

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

当我将一张桌子放在“未分配”学生名单上的学生的桌子上时，桌子仍然在教室里，但学生们按预期落入了名单。 但是，当我尝试将学生放在桌子上时，仅允许将产品放在列表中的谓词不允许它们。 但是，当我删除谓词时，学生会被放入教室列表而不是桌子...

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

将学生丢在课桌上失败：

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

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

参考：

• 文档
• 类似的问题
• 我被卡住的 Stackblitz 示例

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 ：

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

工作示例