Loader löschen, nachdem die Daten bereit sind

Question

In meiner Ionic 2 App habe ich eine Komponente, die einen Dienst verbraucht, der ein http GET macht, um einige Daten abzurufen. Meine Komponente ruft dann diesen Dienst auf und wenn Daten verfügbar sind, wird sie eingestellt und präsentiert.

Es sieht aus wie folgt:

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) 

    } 
... 

} 

Während meine Komponente die Daten asynchron holt, Ich versuche, ein loader Spinnen zu haben und sobald die Daten verfügbar ist, möchte ich die loader verschwinden.

jedoch mit meinem aktuellen Code hält der Spinner Spinnen auch nach Daten verfügbar sind und angezeigt, wie die Screenshot zu sehen:

getData() die Methode ist, die Service-Aufruf macht. Wie kann ich das beheben? Ist es die richtige Art Loader zu implementieren?

Answer 1

Sie können eine working plunker here finden.

Wie Sie den Code dieser Plunker sehen kann, würde ich ein paar Änderungen vornehmen, um Ihren Code richtig funktioniert:

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:

Wie der Freisetzung von Ionic 2.0.0-beta.8 (2016.06.06) changelog:

onPageWillEnter wurde in ionViewWillEnter