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

【问题标题】：Angular-Cdk-Drag-Drop getSortedItems is not instantly updated on drop eventAngular-Cdk-Drag-Drop getSortedItems 不会在放置事件时立即更新
【发布时间】：2021-05-24 14:58:08
【问题描述】：

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

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;
}

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

【问题讨论】：

标签： angular angular-material drag-and-drop angular-cdk-drag-drop

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：