Angular 7 Material Drag & Drop с ngFor для нескольких целей падения на одной странице - PullRequest
Новая
       54

Angular 7 Material Drag & Drop с ngFor для нескольких целей падения на одной странице

0 голосов
/ 22 декабря 2018

У меня проблемы с получением нескольких целей для работы в Angular drag & drop.Имея только один исходный список и один целевой список, он работает отлично, вот код:

Поле ИСТОЧНИКА: 

<div cdkDropList #dragDropList1="cdkDropList" [cdkDropListData]="partsList" [cdkDropListConnectedTo]="[partsDroppedList]" (cdkDropListDropped)="drop($event,1)">
  <div cdkDrag *ngFor="let part of partsList">
    {{ part.name }}
  </div>
</div>

Поле ЗАДАЧИ: 

<div>
  <div cdkDropList #partsDroppedList="cdkDropList" [cdkDropListData]="partsDropped" [cdkDropListConnectedTo]="[dragDropList1]" (cdkDropListDropped)="drop($event,2)">
    <div cdkDrag *ngFor="let part of partsDropped">
      {{ part.name }}
    </div>
  </div>
</div>

Теперь ядумал, что добавление в * ngFor должно работать: 

<div *ngFor="let block of planblocks; let i=index;">
  <div cdkDropList #partsDroppedList="cdkDropList" [cdkDropListData]="partsDropped[i]" [cdkDropListConnectedTo]="[dragDropList1]" (cdkDropListDropped)="drop($event,2)">
    <div cdkDrag *ngFor="let part of partsDropped[i]">
      {{ planpart.name }}
    </div>
  </div>
</div>

... но это не так, он не признает контейнер для перетаскивания как место для отбрасывания элементов.

Любые идеикак я могу подключить ОДИН источник к НЕСКОЛЬКИМ целям?Спасибо за вашу помощь !!

...