Being new to Ionic and MQTT, I could really use some help with an issue I am facing. In my development environment of Ionic CLI PRO 4.3.1, I am attempting to navigate to a new page when a message is received from an MQTT topic. However, I am encountering an error stating 'Cannot read property 'push' of undefined' when trying to execute the navCtrl statement within an if statement.
Here is a snippet of my code:
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.connect({onSuccess:this.onConnect.bind(this)});}
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;
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 { }