データ準備完了後にローダーを解除する方法

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