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


它应该简单地显示该值,并以该值实时响应行

最佳答案

我也遇到了同样的问题,但是我在用这种方式编写代码后解决了这个问题:

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

09-10 02:42
查看更多