在Ionic 3和Angular 4中显示多个请求的加载

如何在两个请求的整个时间内在屏幕上显示加载

我试着在两个请求中都加载call pro。但是当最快的请求完成时，它会隐藏加载，即使另一个请求正在进行

ionViewDidLoad() {
  this.getSummary(parametros);
  this.getHeatmap(parametros);
}

getSummary() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getSummaryByDate().subscribe(
    (response) => {
     /// do something
    }, (error) => {
      this.showSummary = false;
      console.log(`Backend returned error was: ${error}`);
      this.loadingService.hideLoader();
    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    }););
}

getHeatmap() {
  this.loadingService.showLoader(this.constants.MSG_LOADING);

  this.remedyProvider.getHeatmap().subscribe(
    (response) => {
        //do something      
    }, (error) => {
      console.log(`Backend returned error was: ${error}`);

    }, () => {
      console.log('get heatmap complete');
      this.loadingService.hideLoader();
    });
}

加载提供程序的代码（加载服务）：

---

您可以使用

Observable

的

forkJoin

操作符，以便同时发出两个请求，并在两种方法完成时隐藏加载程序：

// Imports...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin'

// ...

  ionViewDidLoad() {

    // Show the loader
    this.loadingService.showLoader(this.constants.MSG_LOADING);

    Observable.forkJoin([
        this.remedyProvider.getSummaryByDate(),
        this.remedyProvider.getHeatmap()
    ]).subscribe(
        response => {
            let summaryResponse = response[0];
            let heatmapResponse = response[1];

            // Do something with the responses...
            // ...
        }, 
        error => {
            // TODO: handle the error!
            console.log(`Backend returned error was: ${error}`);
        },
        () => {
            console.log('Both request are done');

            // Hide the loader
            this.loadingService.hideLoader();
        });
  }

---

谢谢@sebaferreas，但是，如果请求中出现错误怎么办？其他的呢？如果任何一个请求失败@EricoSouza，整个操作都将导致错误状态。你需要用另一种方式处理吗？是的，也许这是另一个问题。但是我需要在页面上显示成功请求的数据，以及返回错误的请求的错误消息。我需要它，还有你的答案。

// Imports...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin'

// ...

  ionViewDidLoad() {

    // Show the loader
    this.loadingService.showLoader(this.constants.MSG_LOADING);

    Observable.forkJoin([
        this.remedyProvider.getSummaryByDate(),
        this.remedyProvider.getHeatmap()
    ]).subscribe(
        response => {
            let summaryResponse = response[0];
            let heatmapResponse = response[1];

            // Do something with the responses...
            // ...
        }, 
        error => {
            // TODO: handle the error!
            console.log(`Backend returned error was: ${error}`);
        },
        () => {
            console.log('Both request are done');

            // Hide the loader
            this.loadingService.hideLoader();
        });
  }