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