我试图使用有角度的 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>
最佳答案
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 循环中拖放项目。希望它能回答你的问题。
关于drag-and-drop - 如果在 cdkDropList 中使用 *ngFor,Angular 拖放将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56324458/