我正在研究拖放系统。我一直在使用的d&d lib有一个问题,解决了引入的新问题。
Old issue with my current solution
我的新问题是,尽管debounceTime按预期工作,但如果我在debounceTime为“活动”状态时拖动多个项目,则仅保存了最后拖动的项目,我如何确保保存每个动作,但不能通过触发每次访问都会通过API调用我们的后端。 ->因为这就是我原来的旧问题所在。
subs = new Subscription();
debouncer = new Subject();
constructor(private dragulaService: DragulaService, ) {
this.makeUndragabbles();
this.subs.add(this.dragulaService.dropModel('cardList')
.subscribe(({ item, target }) => {
const dragObj: DragObject = {
item: item,
stageId: target['id'],
name: this.pipelineConfig.name
};
this.modifyStage(dragObj);
}));
// freshly added solution to not trigger API call with every drop
this.subs.add(this.debouncer.pipe(
debounceTime(500))
.subscribe((val) => this.drag.emit(val)));
}
private modifyStage(draggedItem) {
this.debouncer.next(draggedItem);
}
API调用方法(在另一个组件中):
private saveDraggedItem(pipelineType: string, statusChangeDTO: StatusChangeDTO) {
if (pipelineType === 'dealStages') {
this.dealService.savePipelineDealStageUsingPOST(statusChangeDTO)
.subscribe(res => { }
, (err) => this.error.emit(err)
, () => { this.getAllDealsForPipeline(); });
}
}
drag(draggedItem: DragObject) {
if (draggedItem.item) {
const statusChange: StatusChangeDTO = {
id: draggedItem.item.id,
newStatusId: +draggedItem.stageId
};
this.saveDraggedItem(draggedItem.name, statusChange);
}
}