Wsrtjtyk

First of all I am new to Ionic and MQTT. Would be great if someone help me with this issue. I am trying to push a page in ionic CLI PRO 4.3.1. When a message arrives (1) from MQTT topic, I am trying to open a new page. The navCtrl statement is only working outside of the if statement. I am getting Cannot read property 'push' of undefined error.

My code is below;

add-device.ts

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

import { IonicPage, ModalController, NavParams, NavController, ViewController } from 'ionic-angular';

import {Paho} from 'ng2-mqtt/mqttws31';

import { SignupPage } from '../pages';





@IonicPage()



@Component({

  selector: 'page-add-device',

  templateUrl: 'add-device.html'

})





export class addDevicePage {



  hello: any;

  pushPage: any;

  params: Object;



  constructor(public navCtrl: NavController, 

    public modalCtrl: ModalController, 

    private viewCtrl: ViewController,

    public navParams: NavParams) {}



deviceIDsend() {



console.log("MQQT");

var mqttHost = 'broker.mqttdashboard.com';

var port = 8000; // port for above



this.client = new Paho.MQTT.Client

(mqttHost, port,

  "web_" + parseInt(Math.random() * 100, 10));// set callback handlers

    console.log("connecting to "+ mqttHost +" "+ port);



this.client.onConnectionLost = this.onConnectionLost;

this.client.onMessageArrived = this.onMessageArrived;

 //this.client.subscribe = this.subscribe;

//var options = {

  //  useSSL: true,

    //userName: "username",

    //password: "password",

    //onSuccess:this.onConnect,

    //onFailure:this.doFail

 // }



  // connect the client

this.client.connect({onSuccess:this.onConnect.bind(this)});}

// called when the client connects

onConnect(client) {

console.log("onConnect");



this.client.subscribe("/j/" +this.device_id);

this.message = new Paho.MQTT.Message(this.device_id);

this.message.destinationName = "/j/" +this.device_id;// message.qos = qos;



console.log(this.device_id);

 this.client.send(this.message);}



onMessageArrived(message) {

  console.log("onMessageArrived:" + message.payloadString);



  if (message.payloadString == "1") {

             console.log('in');



    this.navCtrl.push('SignupPage');  

   }



   else{

        console.log('hello');

   }

}



onConnectionLost(responseObject) {

  if (responseObject.errorCode !== 0) {

    console.log("onConnectionLost:" + responseObject.errorMessage);

  }



}





}

add-device.html

<ion-header transparent>

  <ion-navbar transparent>

  </ion-navbar>



</ion-header>

<ion-content class="background">

<ion-card>

  <form (submit)="deviceIDsend()">

  <ion-list>

        <h3 text-wrap style="padding-left: 8%">{{ 'j' | translate }}</h3>

        <p  text-wrap style="padding-left: 8%">{{ 'j' | translate }}</p>

      <div padding>

         <ion-item class="item3"> 

        <ion-label fixed>{{ 'NUMBER' | translate }}</ion-label>

        <ion-input type="email" type="text" name="deviceID" [(ngModel)]="device_id"></ion-input>

      </ion-item>

</div>

    <div padding>

        <button class="LoginButton" ion-button block value="submit" 

        [navPush]="pushPage">{{ 'ADD' | translate }}</button>

      </div>

      </ion-list>

  </form>

</ion-card>



</ion-content>

add-device.module

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

import { TranslateModule } from '@ngx-translate/core';

import { IonicPageModule } from 'ionic-angular';



import { addDevicePage } from './add-device';



@NgModule({

  declarations: [

    addDevicePage,

  ],

  imports: [

    IonicPageModule.forChild(addDevicePage),

    TranslateModule.forChild()

  ],

  exports: [

    addDevicePage

  ]

})

export class addDevicePageModule { }

Can you try the arrow function?
My only suspect is this, but I'm not 100% sure as OP says this.navCtrl.push works outside of the if block.

onMessageArrived = (message) => {

  console.log("onMessageArrived:" + message.payloadString);



  if (message.payloadString == "1") {

             console.log('in');



    this.navCtrl.push('SignupPage');  

   }



   else{

        console.log('hello');

   }

}