javascript - ngx-gauge 不显示接收到的数据

Question

我正在开发一个显示来自服务器的实时数据的页面。现在我正在用一些 mqtt 客户端 websocket(比如 hivemq)测试它。我收到的值本身显示在 chrome 控制台中，但我正在尝试使用 NGX-GAUGE 将此值图形化。ngx-gauge 在页面中正确显示，如果我在“gaugeValue”中输入一个标准数字，它就可以工作(也可以使用 Math.Random)，但是如果我从 MQTT 代理中获取一个值，它就不起作用任何东西

当我尝试从 MQTT 代理获取值时，ngx-gauge 的值和绿线(应该实时增加/减少)没有做任何事情

import { Component, OnInit } from '@angular/core';
import { Paho } from 'ng2-mqtt/mqttws31';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


  valore:String;    

  gaugeType = "semi";
  gaugeValue=this.valore;
  gaugeLabel = "Valore";
  gaugeAppendText = "km/hr";s
  animate=true;
  duration=1500;

  private client;
  mqttbroker = 'broker.mqttdashboard.com';

  ngOnInit() {
    this.client = new Paho.MQTT.Client(this.mqttbroker, Number(8000), 'client1');
    this.client.onMessageArrived=this.onMessageArrived.bind(this);
    this.client.onConnectionLost=this.onConnectionLost.bind(this);
    this.client.connect({onSuccess: this.onConnect.bind(this)});
   }

  onConnect() {
    console.log('onConnect');
    this.client.subscribe('testtopic/40/xxx');
  }

  onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log('onConnectionLost:' + responseObject.errorMessage);
    }
  }

  onMessageArrived(message) {
    console.log('onMessageArrived: ' + message.destinationName + ': ' + message.payloadString);

    if (message.destinationName.indexOf('xxx') !== -1) {
      this.valore = (message.payloadString);
    }
  }
}

它应该简单地显示值，并实时响应该值

Answer 1

我也遇到了同样的问题，但是我通过这种方式编写代码后解决了它:

gaugeValue= 0; //define minimum value in export

this.gaugeValue= (message.payloadString);  // intead of "this.valore" use this.gaugeValue 

更多理解请引用截图1&2； I used _thoughput_gaugeValue for defining

same _thoughput_gaugeValue is used as this._thoughput_gaugeValue for getting data. Do not declare _thoughput_gaugeValue:any