Angular 7 拖放 - 动态创建拖放区

Question

有没有办法动态创建拖放区？我在使用 ngFor 和 cdkDropList 时遇到了一些麻烦。

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个 list :

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在，类为“conta”的 div 位于 *ngFor 中。

我想我的问题是我的第二个列表。如果我将一个元素从第二个列表拖动到第一个列表，它可以正常工作，但是如果我尝试将元素从第一个列表拖动到第二个列表中的任何列表实例，它无法识别正在拖动的元素。演示在这里:

我是不是做错了什么？ typescript 部分工作正常。

谢谢

Answer 1

经过一整天的研究，我找到了this在 Github 上的 Angular CDK 存储库上拉取请求。现在，因为我不知道如何将 cdkDropListGroup 集成到我的示例中，所以我决定创建一个 ID 数组，这些 ID 将被添加到 [cdkDropListConnectedTo]。

我的第二个列表的每个实例都将生成 ID，并且该 ID 将添加到具有合适前缀的数组中(在我的第二个列表中，在 cdkDropList 上):

<div cdkDropList
      [attr.id]="addId(i, j)"
      [cdkDropListData]="appointment.lessons"
      [cdkDropListConnectedTo]="[subjectList]"
      (cdkDropListDropped)="drop($event)"
>

addId方法:

addId(i, j) {
    this.LIST_IDS.push('cdk-drop-list-' + i + '' + j);
    return i + '' + j;
}

(cdk-drop-list- 是一个 ID 前缀。CDK 将这个前缀放在每个具有 cdkDropList 属性的元素上)

因此，我的数组将如下所示:

• cdk-drop-list-00
• cdk-drop-list-01
• cdk-drop-list-02
• 等等

现在，我将该数组传递给第一个列表中的[cdkDropListConnectedTo]:

<div class="subj-container" 
    cdkDropListOrientation="horizontal"
    cdkDropList 
    #subjectList="cdkDropList"            
    [cdkDropListData]="subjects" 
    [cdkDropListConnectedTo]="LIST_IDS"
    (cdkDropListDropped)="drop($event)"
>

而且它完美运行!

希望这对遇到同样问题的人有所帮助。另外，看看我提到的拉取请求，我的解决方案只是一种解决方法，cdkDropListGroup

可能有更好的解决方案