我正在开发一个显示来自服务器的实时数据的页面。现在我正在用一些 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
关于javascript - ngx-gauge 不显示接收到的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56183187/