Change page after http Service Response


#1

Hi
I’m using Ionic 2 to create a app login. After the user inputs his credentials in a login form I start an angularJs http Service Request to my Api. On succesfully Response I want to change the page with this.nav.push(Page1);


import { Component } from '@angular/core';
import { NavController, Alert, Loading } from 'ionic-angular';
import { Authenticate } from '../../providers/authenticate/authenticate';
import { Page1 } from '../page1/page1';

      @Component({
         templateUrl: 'build/pages/start/start.html',
         providers: [Authenticate]
       })

        export class StartPage {

            public authenticate: any;
            
            constructor(private nav: NavController, public authService: Authenticate) {
                    this.nav = nav;
            }

            ...

            this.authService.load()
                  .then(function successCallback(response) {
                        this.nav.push(Page1);

                  }, function errorCallback(response) {
                        
                  });
        }

It works fine if I call the change page before the (async ?!) Request but if I put it in successCallback it gives me this error:
Unhandled Promise rejection: Cannot read property 'nav' of null ;

Thanks for helping :slight_smile:


#2
this.authService.load()
  .then((response) =>{
        this.nav.push(Page1);
  }, (response) => {
        
  });

use => “fat arrow” to maintain and bind to the component so this will work inside of the scope of the then block


#3

Thanks now it works :slight_smile: