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

Question

我正在使用拖放列表让用户以正确的顺序排列项目。我遇到的问题是我的代码中目前有一个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;
}

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

Answer 1

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

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

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

Answer 2

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