angular CDK drag & drop: вложенный список

Question

Я пытаюсь создать демонстрационное приложение , где я могу планировать студентов и их парты. Когда в классе слишком много парт, я могу поставить их в другой класс. Затем я могу планировать студентов на указанных столах. Я использую cdkDropListGroup, потому что количество классных комнат является динамическим c.

Когда я бросаю парту со студентами в списке «не назначенных» учеников, стол остается в классной комнате, но студенты попадают в список, как и ожидалось. Однако, когда я пытаюсь бросить учеников на парты, предикат, который позволяет только товары пропустить в списке, не позволяет им. Однако, когда я удаляю предикат, ученики попадают в список классных комнат вместо парт ...

Сбрасывание парт со студентами работает правильно:

Не удается бросить учеников за парты:

Мне нужно помочь с опусканием учеников специально на парты вместо классных комнат, вызывая срабатывание dropStudent.

Я думал, что повышение контейнера для парт до более высокого Z-индекса может помочь, но это не сработало .

ссылки:

• документы
• аналогичный вопрос stackoverflow
• Stackblitz пример, где я застрял

Answer 1

Вам необходимо использовать опцию cdkDropListConnectedTo в неназначенных списках студентов и добавить все экземпляры списков столов. Это потому, что CdkDropListGroup смотрит только на списки братьев и сестер, а не на детей:

Вам нужно добавить ссылку на шаблон в свой рабочий список, так что вы можете запросить это в компоненте ts, или вы можете использовать a строка идентификаторов. Я думаю, что ссылка на шаблон более универсальна, но для примера я буду использовать идентификаторы:

<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();
}

рабочий пример