如何限制休息电话的角度 [英] How to limit rest calls angular

问题描述

我正在使用ng2-dragula开发看板风格的拖放系统。
我有一个问题，我想是因为每次将项目放到新位置时，它都会将数据发送到服务器，并重做您可以拖动的整个项目列表。而且，如果您执行得足够快，则可以中断拖放周期。
是否有限制API调用间隔的方法？类似于RxJS debounceTime，但是由于列表几乎总是在变化，因此我无法通过管道将其过滤。

I am working on a kanban style drag&drop system with ng2-dragula. And I have an issue, and I think it's because every time you drop an item to a new place it sends the data to the server and redo the whole list of items that you can drag around. And if you do it fast enough you can break the drag&drop cycle. Is there a way to limit the intervall you can make an API call? Similar to RxJS debounceTime, but since the list is almost always changing I cannot pipe a filter to it.

基本构造函数和拖动事件订阅：

Basic constructor and drag event subscribtion:

constructor(private dragulaService: DragulaService, ) {
    this.makeUndragabbles(); 
    this.subs.add(this.dragulaService.dropModel('cardList')
      .subscribe(({ item, target, source }) => {
        const dragObj: DragObject = {
          item: item,
          stageId: target['id'],
          name: this.pipelineConfig.name
        };
        this.modifyStage(dragObj);
        const drake = this.dragulaService.find('cardList').drake; //debug variable
        const sourceModel = drake.models[drake.containers.indexOf(source)]; //debug variable
      }));
  }

首先是制作不可拖动的物品，不是更多：

First it was for making non draggable items, not it's a bit more:

private makeUndragabbles() {
    if (!this.dragulaService.find('cardList')) {
      this.dragulaService.createGroup('cardList',
        {
          copy: false,
          revertOnSpill: true,
          moves: (el, container, handle, sibling) => {
            return !el.classList.contains('nodrag');
          },
          isContainer: (el) => {
            return el.classList.contains('stage');
          }
        });
    }
  }

拖曳的项目发射功能：

private modifyStage(draggedItem) {
    this.drag.emit(draggedItem);
  }

其余调用函数：

   private saveDraggedItem(pipelineType: string, statusChangeDTO: StatusChangeDTO) {
        if (pipelineType === 'dealStages') {
          this.dealService.savePipelineDealStageUsingPOST(statusChangeDTO).pipe(
            debounceTime(1000),
          )
            .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);
    }
  }

推荐答案

一种可能的实现方式：

• 将拖动转换为 EventEmitter ，保持您的 modifyStage 方法


• 创建 destroy $ Subject 发出 ngOnDestroy

• turn drag into an EventEmitter, maintaining your modifyStage method
• create a destroy$ Subject which emits in ngOnDestroy

然后输入 ngOnInit ：

this.drag.pipe(
  takeUntil(this.destroy$),
  debounceTime(1000),
  filter(item => !!item.item)
  map(item => {
    const statusChange: StatusChangeDTO = {
      id: draggedItem.item.id,
      newStatusId: +draggedItem.stageId
    };
    return { name: item.name, status: statusChange }
  }),
  filter(data => data.name === 'dealStages'),
  concatMap(data => this.dealService.savePipelineDealStageUsingPOST(data.status))
  // depending on requirements, perhaps use switchMap or exhaustMap
).subscribe();

虽然这还不是很完整，但我认为这说明了我的方法。您如何看待？

While this is not totally complete, I think it illustrates my approach. What do you think?

这篇关于如何限制休息电话的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！