angular - Angular 7 Material Drag&Drop 与 ngFor 用于同一页面上的多个放置目标

Question

我在让多个放置目标用于 Angular 拖放时遇到问题。只有一个源列表和一个目标下拉列表，它工作得很好，这里是代码：

源框：

<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>

...但它没有，它没有将放置容器识别为放置物品的地方。

任何想法如何将一个源连接到多个目标？谢谢你的帮助！！