Come chiudere Caricatore dopo che i dati sono pronti

Question

Nella mia app Ionic 2, ho un componente che consuma un servizio che rende un http GET per recuperare alcuni dati. Il mio componente chiama quindi questo servizio e quando i dati sono disponibili lo imposta e lo presenta.

Sembra seguente:

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) 

    } 
... 

} 

Mentre la mia componente recupera i dati in modo asincrono, sto cercando di avere una filatura loader e una volta che i dati sono disponibili, voglio che il loader a scomparire.

Tuttavia, con il mio codice attuale la filatrice continua a girare anche dopo che i dati sono disponibili e visualizzati come si può vedere lo screenshot:

getData() è il metodo che fa chiamata di servizio. Come posso risolvere questo problema? È il modo corretto di implementare il caricatore?

Answer 1

È possibile trovare uno working plunker here.

Come si può vedere nel codice di che plunker, vorrei fare alcune modifiche al fine di rendere il vostro lavoro correttamente il codice:

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:

a partire dalla release di ionico 2.0.0-beta.8 (2016/06/06) changelog:

onPageWillEnter è stato rinominato in ionViewWillEnter