Cannot read property 'navCtrl' of null ionic

#1

The problem is that I wanna make an event in alert(button) that I wanna make it move me to another page and this button no longer exist in HTML that the reason I can’t make a (click) function and when I run it, give me no provider error “No provider for NavController”. I tried another option

I used ViewChild and import it from @angular/core,
make @viewChild(‘myApp’) and added this #myApp to ion-nav
define navCtrl: NavController in class.

In a constructor, I added public push: Push but it can’t read it. in this time it gives me “Cannot read property ‘navCtrl’ of null”.

Here is my code…

import { Component } from ‘@angular/core’;
import { Platform, Alert, AlertController, NavController } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import firebase from ‘firebase’;
import { FirebaseProvider } from ‘…/providers/firebase/firebase’;
import { ViewProvider } from ‘…/providers/view/view’;

//pages
import { OpenPage } from ‘…/pages/open/open’;
import { AcceptOrderPage } from ‘…/pages/accept-order/accept-order’;

@Component({
templateUrl: ‘app.html’
})

export class MyApp {
rootPage = OpenPage;
public marginClass:any=“normal”;
public available:boolean=true;
public orderId:string;
public alert: Alert;

constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen, public fb: FirebaseProvider,
public view: ViewProvider, private alertCtrl: AlertController, public
navCtrl: NavController) {
platform.ready().then(() => {
if (platform.is(‘ios’)){
this.marginClass=“iosMargin”
}
statusBar.styleDefault();
splashScreen.hide();
});
var config = {
apiKey: “AIzaSyDbn0bLyNh4emJXjVAKb_BsOyH7ahiY-3U”,
authDomain: “cat-drivers.firebaseapp.com”,
databaseURL: “https://cat-drivers.firebaseio.com”,
projectId: “cat-drivers”,
storageBucket: “cat-drivers.appspot.com”,
messagingSenderId: “444330551162”
};
firebase.initializeApp(config);

var starCountRef = 
 firebase.database().ref('drivers/'+this.orderId+'/Orders');
 starCountRef.on('value', function(snapshot) {
   let alert = alertCtrl.create({
     title: 'لديك طلب جديد؟',
      buttons: [
     {
      text: 'رفض',
      role: 'cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
     },
     {
      text: 'قبول',
      handler: () => {
        console.log('Buy clicked');
        navCtrl.push(AcceptOrderPage);
      }
     }
   ]
 });
 alert.present();

});
}
sendData(x){
this.view.localGet(“uid”).then((uid)=>{
this.fb.setData(‘drivers/’+uid+’/outOfService/’,x)})
}

toggleState(item){
 this.available=!this.available;
  // console.log(this.available)
 }

}

#2

navCtrl.push(AcceptOrderPage);
Must be use as this.navCtrl.push(AcceptOrderPage);
In this case you use this inside a inside function. So you must do a trick as:

firebase.initializeApp(config);
// add a local variable to store navCtrl object
let thatNavCtrl = this.navCtrl;
///
var starCountRef = .......

/*use thatNavCtrl instead of this.navCtrl
replace the line navCtrl.push(AcceptOrderPage); to: */
thatNavCtrl.push(AcceptOrderPage);
#3

You don’t want to be typing function in an Ionic app. Instead, you want to utilize the “fat arrows” syntax () =>.

So replace:
function(snapshot)

with:
(snapshot) =>

#4

I think this is a UI mistake and also a recipe for technical problems. If you insist on doing it, I would pass some information back to the page that popped the alert and do the navigation in that page, not in the alert itself.

#5

Thanks, Sigmund Froyd.
It’s really helpful