角形材质拖放动态多个下拉列表元素

Question

如何从包含一组可拖动元素的源放置列表向数量可变的多个目标放置元素进行拖放。 到目前为止，我已经创建了可拖动项目和目标放置项目的放置列表，但是我无法拖放。 拖放元素多且数量可变时，如何拖放？

<div #origin="cdkDropList" class="box-list" cdkDropList cdkDropListOrientation="vertical"
        [cdkDropListData]="headers" [cdkDropListConnectedTo]="[destination]" (cdkDropListDropped)="drop($event)">
        <label>
          <h3><strong>Header CSV</strong></h3>
        </label>
        <div class="drag-box" *ngFor="let header of headers" cdkDrag>
          {{header}}
        </div>
      </div>

      <div #destination="cdkDropList" cdkDropList class="box-list" cdkDropListOrientation="vertical"
        *ngFor="let m of maps" [cdkDropListData]="maps" [cdkDropListConnectedTo]="[origin]"
        (cdkDropListDropped)="drop($event)">
        <label>
          <h3><strong>{{m.colDB}}</strong></h3>
        </label>
      </div>

map是由两个字符串类型的变量组成的复杂类型：colDB和colCSV