使用 trackby 的 Angular Drag and Drop 正在迅速恢复

Question

我想使用 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; }

Answer 1

pointer.instance 仍然是一个对象，所以 trackBy 不知道它被改变了。

试试这个:

identify = (index, pointer: Pointer) => { return pointer.instance.id; }

或您实例上的任何其他 ID。