いくつかのリクエストからデータをロードした後のionic angular4アクション

Question

2つのリクエストからデータをロードした後に、ロードを隠す問題があります。 すべてのリクエストが完了した後で、データのロードを開始してローダーを非表示にする前に、show loaderが必要です。どのように解決するのか分かりません。

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

あなたは一度発光する2つの観測値に依存しています。これを行う最善の方法は、ユースケースに依存します（たとえば、複数回読み込むことができます）が、ここでは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 */); 
    } 
} 

ここでは、ページが読み込まれたときにデータを読み込み、読み込みインジケータを表示します。製品とバナーの両方がロードされている場合（一度出力）、ローダーを非表示にすることができます。