在完成所有http请求后收到通知

时间:2017-10-05 00:10:46

标签: angular typescript

我们要做的是知道所有http请求何时完成。以这样的小块加载数据\

onLoadData(){

  do{

   this._reportService.getRawData(
      {
        //..pass pagination info here
      }
    ).subscribe(
      res=>{
        this.fetchedtrucks += this.paginatorval;
      }
    )

  i+= this.paginatorval;

}while(i<this.totalRecords);


//always check if its completed 

setTimeout(()=>{
  if(this.fetchedtrucks >= this.totalRecords){
    this.completedLOadingData();
    console.log("Completed loading trucks"); //executed
  }

}, 500);

}

现在他dataLoading完成功能

  completedLOadingData(){

   console.log("Updating DOM");
   this.dataLoadingCmplete = true;
   this.exportstart = false;
   this._appRef.tick();
 }

从上面我想听听当totalfetched等于totalrecords因此我可以确定所有数据都被拉了

现在我有html

  <button type="button" *ngIf="!dataLoadingCmplete" class="btn btn-danger" >Export</button>

<button type="button" *ngIf="dataLoadingCmplete" class="btn btn-danger"> Genrate </button>

但即使在数据完成后,按钮状态也不会改变。可能有什么不对?

1 个答案:

答案 0 :(得分:1)

您的代码假定所有请求都将在半秒内完成。可能不是一个合理的假设。尝试在HTTP响应回调中进行完成检查。

onLoadData() {
    do {
        this._reportService.getRawData({ /* ... */ })
            .subscribe(
                response => {
                    this.fetchedtrucks += this.paginatorval;

                    if (this.fetchedtrucks >= this.totalRecords) {
                        this.completedLOadingData();
                    }
                }
            )

        i += this.paginatorval;

    } while (i < this.totalRecords);
}

还假设this.paginatorval在数据加载期间未在其他任何位置更新,或ifetchedtrucks不对齐。您的_reportService也需要返回有效的Observable。如果仍有问题,您可能需要在调试器中逐步执行它。