Angular 7 Material Drag&Drop with ngFor for multiple drop targets on same page

Question

I'm having problems with getting multiple drop targets to work for Angular drag & drop. With just one source list and one target drop list it's working perfectly, here's the code:

SOURCE box:

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

TARGET box:

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

Now I was thinking adding in an *ngFor should work:

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

...but it doesn't, it's not recognizing the drop container as a place to drop the items.

Any ideas how I can connect ONE source to MULTIPLE targets? Thanks for your help!!