Как уволить загрузчика после того, как данные готовы

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(); 
    } 
... 

} 

============= ===================

ОБНОВЛЕНИЕ:

с выпуском Ионная 2.0.0-beta.8 (2016-06-06) changelog:

onPageWillEnter был переименован в ionViewWillEnter