来自几个请求的负载数据后的离子Angular4动作

Question

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

 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();
    }
     }

Answer 1

您依靠两个可观察到的发射一次。执行此操作的最佳方法取决于您的用例（例如，您可以多次加载任何一次），但我认为combineLatest在这里最适合您。我还建议在模板中使用异步管而不是手动订阅。

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 */);
    }
}

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