Блог

Я использую список перетаскивания для пользователя, чтобы расположить элементы в правильном порядке. Проблема, с которой я сталкиваюсь, заключается в том, что в настоящее setTimeout время в моем коде есть a, потому что метод получения порядка списка не обновляется мгновенно при отбрасывании. Я подозреваю, что он обновляется после анимации или чего-то в этом роде.

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

Как мне избавиться от тайм-аута, если я хочу знать текущий порядок сортировки?

у вас есть 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(',');