데이터가 준비된 후 Loader를 닫는 방법

Question

내 Ionic 2 앱에는 http GET으로 일부 데이터를 가져 오는 서비스를 사용하는 구성 요소가 있습니다. 그런 다음 내 구성 요소가이 서비스를 호출하고 데이터를 사용할 수있게되면이를 설정하고 제공합니다. 내 구성 요소가 비동기 적으로 데이터를 가져 오는

export class FarmList implements OnInit { 

    items: Object; 


    constructor(public testService: TestService, public nav: NavController){ 
    } 

    ngOnInit(){ 

    this.getData() 
    } 

    getData(){ 

    let loading = Loading.create({ 
     content: 'Please wait..', 
     spinner: 'crescent' 
    }) 

    this.nav.present(loading) 

    this.testService.fetchData().then(data => this.items = data) 

    } 
... 

} 

동안, 나는 loader 회전을하려고하고 데이터를 사용할 수있게되면, 나는 loader 사라지게 할 :

그것은를 다음과 같습니다.

하지만, 내 현재 코드와 회 전자 데이터를 사용할 수 및 스크린 샷을 볼 수 있습니다로 표시 후에도 계속 회전 :

getData() 서비스 호출을 만드는 방법이다. 어떻게 해결할 수 있습니까? 로더를 구현하는 올바른 방법입니까?

Answer 1

working plunker here을 찾을 수 있습니다.

해당 plunker의 코드에서 볼 수있는 것처럼, 내가 제대로 코드가 작동하기 위해서는 몇 가지 변화를 만들 것입니다 :

export class FarmList implements OnInit { 

    items: Object; 

    // Define the loading var here, so we can access later when the information is ready 
    loading : any; 

    constructor(public testService: TestService, public nav: NavController){ 
    } 

    // Instead of 'ngOnInit', I would use 'ionViewWillEnter' 
    ionViewWillEnter(){ 
    this.getData() 
    } 

    getData(){ 

    this.loading = Loading.create({ 
     content: 'Please wait..', 
     spinner: 'crescent' 
    }) 

    this.nav.present(this.loading) 

    this.testService.fetchData().then(data => { 
             this.items = data; 

             // After we get the data, we hide the loading 
             this.hideLoading()}); 

    } 

    // I 've added this method so we can grab the loading var and use it 
    // to hide the loading component. 
    private hideLoading(){ 
    this.loading.dismiss(); 
    } 
... 

} 

을 ============= ===================

UPDATE : 이온 2.0.0-beta.8의 릴리즈에서

(2016년 6월 6일) changelog :

onPageWillEnter의 이름이 ionViewWillEnter