Angular 如果在 cdkDropList 中使用 *ngFor，则拖放操作无效

Question

我曾尝试使用 angular material 拖放操作，但我在 cdkDropList 容器中循环。我无法将项目从目录拖到（待办事项）列表。如果我没有使用任何循环，那么它工作正常。

我试过没有循环但工作正常

<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 循环中拖放项目。希望它能回答你的问题。

Angular 如果在 cdkDropList 中使用 *ngFor，则拖放操作无效

Angular Drag and drop is not working if using *ngFor in cdkDropList

drag-and-drop

angular-material2