Перетаскивание влево не работает при использовании * ngFor в cdkDropList - PullRequest
Новая
       48

Перетаскивание влево не работает при использовании * ngFor в cdkDropList

1 голос
/ 27 мая 2019

Я пытался использовать угловое перетаскивание материала, и я просматривал контейнер 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>

1 Ответ

0 голосов
/ 31 мая 2019

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.Надеюсь, что это отвечает на ваш вопрос.

...