如何解决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(',');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。