drag-and-drop - 如果在 cdkDropList 中使用 *ngFor，Angular 拖放将不起作用

Question

我试图使用有角度的 Material 拖放，我正在循环 cdkDropList容器。我无法将项目从目录拖到(待办事项)列表中。如果我没有使用任何循环，那么它工作正常。

这是我的 stackblitz link

我试过没有运行正常的循环

<div cdkDropList #todoList="cdkDropList"  [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
  class="column-list" (cdkDropListDropped)="drop($event)" 
  <div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
  'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
    {{item.Name}}</div>
</div>

但如果我添加这个 *ngFor它不工作

<div cdkDropList #todoList="cdkDropList"  [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
  class="column-list" (cdkDropListDropped)="drop($event)" *ngFor="let item of signalContainer">
  <div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
  'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y">
    {{item.Name}}</div>
</div>

Answer 1

COMPONENT.TS

    import {Component} from '@angular/core';
    import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

    @Component({
      selector: 'cdk-drag-drop-connected-sorting-example',
      templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
      styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
    })
    export class CdkDragDropConnectedSortingExample {

    initialSkeleton = new Array(5);
      done = [
        'A','B','C','D','E'
      ];

      drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          debugger;
         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
          event.container.data[event.currentIndex] =  event.previousContainer.data[event.previousIndex];
        }

      }
    }

HTML

 <div class="example-container">
        <h2>To do</h2>
        <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="initialSkeleton" [cdkDropListConnectedTo]="[doneList]" class="example-list"
         (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of initialSkeleton" cdkDrag>
             <div class="child" >{{item }}</div>
            </div>
        </div>
    </div>
    <div class="example-container">
        <h2>Done</h2>
        <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="example-list"
         (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
        </div>
    </div>

我已经修改了代码，现在您将能够在 for 循环中拖放项目。希望它能回答你的问题。