डेटा के बाद लोडर को खारिज कैसे करें

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