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

【问题标题】：ngx-gauge doesn't show the received datangx-gauge 不显示接收到的数据
【发布时间】：2019-10-04 14:17:42
【问题描述】：

我正在开发一个显示来自服务器的实时数据的页面。现在我正在使用一些 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);
    }
  }
}

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

【问题讨论】：

标签： javascript html css angular typescript

【解决方案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

【讨论】：