从少数请求加载数据后的ionic angular4操作

我在从两个请求加载数据后隐藏加载数据方面存在问题。 我希望在开始加载数据之前显示加载程序，在所有请求完成之后隐藏加载程序。我不知道如何解决它

 export class HomePage {
    Products: Product[];
    Baners: Baner[];

    constructor(private navCtrl: NavController,
                private productsService: ProductsService,
                private BannerService: BanersService) {
    }

    /**
     * Get products
     */
    loadProducts(): void {
        this.productsService.getOnHomepage().subscribe((products) => {
            this.Products = products;
        });
    }

    /**
      * get baners    
    */
    loadBaners(): void {
        this.BannerService.getOnHomepage().subscribe((baners) => {
            this.Baners = baners;
        });
    }


    loadData(): void {
        // I want to show the loader

        this.loadProducts();
        this.loadBaners();

        //I want to hide the loader

    }



 ionViewWillEnter(){
        this.loadData();
    }

     }

---

你依赖于两个观测到的一次发射。实现这一点的最佳方法取决于您的用例（例如，您可以多次加载），但我认为

combinelateest

在这里最适合您。我还建议在模板中使用异步管道，而不是手动订阅

export class HomePage {
    Products = this.productsService.getOnHomepage();
    Banners = this.BannerService.getOnHomepage();

    constructor(private navCtrl: NavController,
            private productsService: ProductsService,
            private BannerService: BannerService) {
    }

    ionViewDidLoad() {
      /* show loader here */
      combineLatest(this.Products, this.Banners).take(1).subscribe(/* hide loader here */);
    }
}

在这里，我加载数据并在页面加载时显示加载指示器。当产品和横幅都已加载（发射一次）时，您可以隐藏加载程序