角CDK拖放到区域中

Question

在我的一生中，我不知道如何拥有多个可进入的区域。我必须动态地执行此操作，因为区域的数量可能会根据http json提要而变化。

这是我的角度模板：

<div cdkDropListGroup> 
<div class="categories-wrapper">
<div class="dd-container" #desc>
<div class="row" *ngFor="let item of descs; index as i">
    <div class="col-sm">
            <div class="desc-box" [attr.data-id]="item.id" >{{item.text}}</div>
    </div>
    <div class="col-sm">
        <div cdkDropList
            [attr.id]="droplist + i"
            [cdkDropListData]="drops + i"
            class="dd-list"
            [cdkDropListConnectedTo]="[draglist]"
            (cdkDropListDropped)="drop($event)">    
            <div class="dd-box" appHighlight [attr.data-id]="item.description_id" *ngFor="let item of drops[i]" cdkDrag>{{item.term}}</div>
        </div>
    </div>
</div>
</div>

</div>

<div class="dd-container" [style.display]="canSubmit ? 'none' : 'block'">
  <p>Terms<span class="ins">(Drag terms below next to the proper description above.)</span></p>
  <div class="categories-wrapper">
  <div
    cdkDropList
    #draglist="cdkDropList"
    [cdkDropListData]="drags"
    class="dd-list"
    [cdkDropListConnectedTo]="[droplist1]"
    (cdkDropListDropped)="drop($event)"
    >            
    <div class="dd-box" appHighlight [attr.data-id]="item.description_id" *ngFor="let item of drags" cdkDrag>{{item.term}}</div>
  </div>
</div>
</div>
</div>
</div>

我要附上一张图片，向您展示拖放区，这些拖放区应显示在它们应匹配的描述的右侧。

我添加了一个绘制描述并删除的循环，并且我将id增量设置为droplist + i，因此每个都有唯一的id。