Angular-Cdk-Drag-Drop getSortedItems 不会在放置事件时立即更新

问题描述

我正在使用拖放列表让用户按正确的顺序排列项目。我遇到的问题是我的代码中目前有一个 setTimeout，因为检索列表顺序的方法不会在删除时立即更新。我怀疑它在动画之后更新。

HTML

<div class="sort-order" cdkDropList *ngIf="parsedInteraction?.optionsSortOrder"
    [cdkDropListData]="parsedInteraction?.optionsSortOrder" (cdkDropListDropped)="sortOrderDrop($event)">
    <div class="sort-order-draggable" *ngFor="let item of parsedInteraction?.optionsSortOrder" cdkDrag
        [cdkDragData]="item">
        <div *ngIf="item?.picture" [innerHTML]="item.picture | safeHtml"></div>
        <div *ngIf="item?.option" [innerHTML]="item.option | safeHtml"></div>
    </div>
</div>

TS

sortOrderDrop(event: CdkDragDrop<InteractionoptionSortOrder[]>) {
  moveItemInArray(
    event.container.data,event.prevIoUsIndex,event.currentIndex
  );

  // How to remove this ugly thing?
  window.setTimeout(() => {
    this.currentSortOrder = (
      event.container.getSortedItems() as CdkDrag<InteractionoptionSortOrder>[]
    )
      .map((draggable) => draggable.data.position)
      .join(',');
  },100);

  this.hasDragged = true;
}

如果我想知道当前的排序顺序，如何摆脱超时？

解决方法

你有 event.previousIndex,event.currentIndex 然后在 moveItemArray() 之前将该顺序存储在某个变量中

,

事实证明 event.container.data 在 moveItemInArray 方法之后保持正确的顺序。仍然想知道为什么 getSortedItems 会延迟以及它应该如何工作。

moveItemInArray(
  event.container.data,event.previousIndex,event.currentIndex
);

this.currentSortOrder = event.container.data
  .map((draggable) => draggable.position)
  .join(',');