![](/img/trans.png)
[英]How do I show LoadingController for multiple requests in Ionic 2
[英]Show loading for multiple requests in Ionic 3 and Angular 4
如何在兩個請求的整個時間內在屏幕上顯示負載?
我試圖在兩個請求中都放入呼叫專業人員。 但是,最快的請求完成后,即使其他請求正在進行,它也會隱藏加載。
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();
});
}
LoadingProvider的代碼(loadginService):
export class LoadingProvider {
loader: any = null;
constructor(private _loadingController: LoadingController) {
}
private showLoadingHandler(message) {
if (this.loader == null) {
this.loader = this._loadingController.create({
content: message
});
this.loader.present();
} else {
this.loader.data.content = message;
}
}
private hideLoadingHandler() {
if (this.loader != null) {
this.loader.dismiss();
this.loader = null;
}
}
public showLoader(message) {
this.showLoadingHandler(message);
}
public hideLoader() {
this.hideLoadingHandler();
}
}
您可以使用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();
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.