在debounceTime处于活动状态时获取所有更改

时间:2019-08-08 10:52:12

标签: angular drag-and-drop rxjs ng2-dragula

我正在研究拖放系统。我一直在使用的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);
    }
  }

0 个答案:

没有答案