仅在 if 语句中无法使用 MQTT 读取 Ionic 中未定义的属性“推送”答案

【问题标题】：Cannot read property 'push' of undefined in Ionic with MQTT in if statement only仅在 if 语句中无法使用 MQTT 读取 Ionic 中未定义的属性“推送”
【发布时间】：2018-11-23 05:29:01
【问题描述】：

首先，我是 Ionic 和 MQTT 的新手。如果有人帮助我解决这个问题，那就太好了。我正在尝试在 ionic CLI PRO 4.3.1 中推送页面。当消息从 MQTT 主题到达 (1) 时，我正在尝试打开一个新页面。 navCtrl 语句仅在 if 语句之外工作。 我收到无法读取未定义错误的属性“push”。

我的代码如下；

添加设备.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);
  }

}


}

添加设备.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 { }

【问题讨论】：

显示您的整个组件代码，以便我们找出您的 this.navCtrl 属性有什么问题
你有没有在构造函数中传入navCtrl？
您好@Aragorn，我已将其包含为公共 navCtrl：NavController。 navCtrl 在 if 语句之外工作。
@ArtyomAmiryan 我包含了整个组件。

标签： angular typescript ionic-framework

【解决方案1】：

你可以试试箭头功能吗？我唯一的嫌疑人是this，但我不能100% 确定，因为OP 说this.navCtrl.push 在if 块之外工作。

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

  if (message.payloadString == "1") {
             console.log('in');

    this.navCtrl.push('SignupPage');  
   }

   else{
        console.log('hello');
   }
}

【讨论】：