我想使用 cdk 拖放来重新排序 ngFor 列表,但是因为我不想在放置后为每个元素再次触发动画,所以我还想使用 trackby
问题是当我使用 trackby 时,拖动每次都会快速返回而不是停留在缩进的索引位置
<ng-container *ngIf="tabObj$ | async as tab">
<div
cdkDropList
[cdkDropListData]="memberList"
[cdkDropListConnectedTo]="bumble"
[cdkDropListDisabled]="isDisabled"
(cdkDropListDropped)="drop($event)"
[id]="tabid"
[style]="template.style">
<div class="indication" (click)="handleInfoClick(tab)">{{ALTtabid}} -- {{tabid}}</div>
<sss-node
*ngFor="let pointerobj of memberList; let i = index; trackBy: identify;"
cdkDrag
[cdkDragData]="pointerobj"
class="cdk-drag-animating"
[ngClass]="pointerobj._id"
[loading]="pointerobj.loading"
[ancestry]="getAncestry(pointerobj, i)"
[bubbleUp]="handleBubble.bind(this)">
</sss-node>
</div>
</ng-container>
drop(event: CdkDragDrop<string[]>) {
console.log("this.tabid", this.tabid);
console.log("event", event);
this.goforward(event);
console.log("boo");
}
goforward(event:any){
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
// this.memberList.splice(event.currentIndex, 0, this.memberList.splice(event.previousIndex, 1)[0]);
} else {
// transferArrayItem(event.previousContainer.data,
// event.container.data,
// event.previousIndex,event.currentIndex);
}
}
identify = (index, pointer: Pointer) => { return pointer.instance; }
最佳答案
pointer.instance
仍然是一个对象,所以 trackBy
不知道它被改变了。
试试这个:
identify = (index, pointer: Pointer) => { return pointer.instance.id; }
或您实例上的任何其他 ID。
关于使用 trackby 的 Angular Drag and Drop 正在迅速恢复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67156105/