몇 가지 요청에서 데이터를로드 한 후 이온 각도 4 작업

Question

두 요청에서 데이터를로드 한 후 부하를 숨기는 데 문제가 있습니다. 모든 요청을 완료 한 후에 데이터 로딩을 시작하고 로더를 숨기기 전에 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

한 번 발광하는 두 개의 관측기에 따라 달라집니다. 이 작업을 수행하는 가장 좋은 방법은 사용 사례 (예를 들어 여러 번로드 할 수 있습니까?)에 따라 다르지만 여기서는 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 */); 
    } 
} 

여기 페이지가로드 될 때 데이터를로드하고로드 표시기를 표시합니다. 제품과 배너가 모두로드되면 (한 번만 표시됨) 로더를 숨길 수 있습니다.