Ionic view not updating page when opened second time

Question

i am using ionic 2.I am facing lots of problem in ionic 2. When i navigate push to show the data. At first time its works fine. After that its printing the data in console. But not showing in screen.

And also in terminal, when i do some changes in .ts,.html,.scss file.Its not updating . I need to close my terminal and again i need to do ionic serve --lab.. so is there any change the .ts file to .js. And if yes, does the syntax i need to change any thing inside new .js file.

Thanks, sathish

Update :

I have home screen and by push i am passing the cat id to pupulate the data in my settings.html based on the cat id that i am passing from home.html:

my home.html

    

  
     

          
               {{Catdata[i].CategoryName}}
            

            
                 {{Catdata[i+1].CategoryName}}

my home.ts:

data: any;
 
   Catdata: any;

    constructor(   public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http:Http,
        public authService: AuthService) {
    this.submit();
      }
     submit() {     
     
        this.authService.categ(this.loginData).then((result) => {
        
          this.data = result;
    
           if(this.data.status == 1)
           {
           this.Catdata = this.data.CatgeoryList;
    
           
               for(let i=0; i {
        
        
        });     
      } 
    
    
    public showDetails(catId: any): void {
        this.navCtrl.push(SettingsPage, { clickedcatId: catId });
    
    
    }

My settings.html:

  

  
     

          
               {{data[i].SubCategoryName}}
            

            
                 {{data[i+1].SubCategoryName}}

my settings.ts

 data: any;
 
   Catdata: any;

    constructor( public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http:Http,
        public authService: AuthService,private navParams: NavParams) {
    
        this.categoryid = navParams.get('clickedcatId');
        console.log(this.categoryid);
    
    this.another();
    
    
      }
    
      another() {
    
       this.subcatdata = { CatID:this.categoryid};
      
      this.authService.subcatte(this.subcatdata).then((result) => {
        
          this.data = result;
    
          console.log (this.data);
    
           if(this.data.status == 1)
           {
           this.Catdata = this.data.SubCatgeoryList;
    
           
               for(let i=0; i {
        
        
        });     
    }

My authservice.ts

This is fine:

categ(cat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'categories.php', JSON.stringify(cat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

   subcatte(subcat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'subcategory.php', JSON.stringify(subcat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

warl0ck · Accepted Answer

Everything in your code is fine except you forgot to take care of lifecycle Events in ionic

what went wrong is when you first load the page it's constructor gets called, and this page gets cached and next times constructors is not called hence is data is not fetched from the server and shows empty page on your app.

Here is the updated code where your another() method will always be called either you are visiting the page for the first time or not after calling it in ionViewDidEnter() function as ionViewDidEnter() method as mentioned in the documentation and mentioned here in lifecycle events section

ionViewDidEnter : void Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

data: any;

Catdata: any;

constructor(public alertCtrl: AlertController,
    public modalCtrl: ModalController,
    public navCtrl: NavController,
    public http:Http,
    public authService: AuthService, private navParams: NavParams) {

    this.categoryid = navParams.get('clickedcatId');
    console.log(this.categoryid);
}

ionViewDidEnter() {
    this.another();
}

another() {

    this.subcatdata = { CatID: this.categoryid };

    this.authService.subcatte(this.subcatdata).then((result) => {

        this.data = result;

        console.log(this.data);

        if (this.data.status == 1) {
            this.Catdata = this.data.SubCatgeoryList;


            for (let i = 0; i < this.Catdata.length; i++) {
                console.log(this.Catdata[i].SubCategoryName);
            }

        }

        else if (this.data.status == 0) {

            let alert = this.alertCtrl.create({
                title: 'Error',
                subTitle: 'Please Enter Valid Username & Password',
                buttons: ['OK']
            });
            alert.present();
        }

    }, (err) => {


    });
}

Here is updated settings.ts code with loader showing till the data is fetched from the server:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { AlertController, ModalController, NavParams, LoadingController } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../../providers/AuthService';

@Component({
    selector: 'page-settings',
    templateUrl: 'settings.html'
})
export class SettingsPage {

    data: any;
    responsedata: any;
    Catdata: any = null;
    Catdatanames: any;
    categoryid: any;
    subcatdata: any;



    constructor(public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http: Http,
        public authService: AuthService, private navParams: NavParams,
        public loadingCtrl: LoadingController) {
    }

    ionViewDidEnter() {
        this.categoryid = this.navParams.get('clickedcatId');
        console.log(this.categoryid);
        this.presentLoadingText();
    }

    presentLoadingText() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: 'Please Wait...'
        });

        loading.present();
        this.another(loading);
    }

    another(loading) {

        this.subcatdata = { CatID: this.categoryid };

        this.authService.subcatte(this.subcatdata).then((result) => {

            this.data = result;

            console.log(this.data);

            if (this.data.status == 1) {
                this.Catdata = this.data.SubCatgeoryList;


                for (let i = 0; i < this.Catdata.length; i++) {
                    console.log(this.Catdata[i].SubCategoryName);
                }
            }

            else if (this.data.status == 0) {

                let alert = this.alertCtrl.create({
                    title: 'Error',
                    subTitle: 'Please Enter Valid Username & Password',
                    buttons: ['OK']
                });
                alert.present();
            }
            loading.dismiss();            

        }, (err) => {
            loading.dismiss();
        });
    }
    opndetailpage() {

    }

}

And updated settings.html page

    
  

  

    sub category
  

  







  This is sub cat


  

  

          
               {{Catdata[i].SubCategoryName}}
            
 





  This is subjetcs

Notice I have removed other div element as when you have odd number of items in Catdata in your case as 5 it wont be able to fetch Catdata[5] as there are only elements till index 4.

If you want 2 Items in a single row I recommend you check ionic Grid Documentation which is exactly what you want to achieve.

Here is the complete: src

Ionic view not updating page when opened second time

Update :

Answers (1)

Related Questions