Question

我想在ngx-chart-gauge中可视化一些实时数据。
我用这个演示构建了这个： https://swimlane.gitbooks.io/ngx-charts/content/v/6.0.2/charts/gauge.html
我从服务中获取了我的liveata，并希望在ngx-chart-gauge中显示数据。我从Service ClassdataproviderService 获取数据，该数据将对象保存在数组中＆＃39;单＆＃39;。
这是我的 ngx-chart-gauge组件：

import {Component, OnInit, OnChanges, AfterViewInit, AfterViewChecked, AfterContentChecked, AfterContentInit, NgModule} from '@angular/core';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {TempdatagiaService} from '../paho/tempdatagia.service';
import {ClassdataproviderService} from '../mqtt/classdataprovider.service';
import * as d3 from 'd3';

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

  view: any[] = [700, 400];
  data: any[];
  multi: any[];
  autoScale = true;

  constructor(private classdataproviderServie: ClassdataproviderService) {
  }


  ngOnChanges() {

      this.data = this.classdataproviderServie.single;

  }



  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C']
  };

  onSelect(event) {
    console.log(event);
  }
}

这是 ngx-chart-gauge.html

<ngx-charts-gauge
  [view]="view"
  [scheme]="colorScheme"
  [results]="data"
  [min]="0"
  [max]="100"
  [angleSpan]="240"
  [startAngle]="-120"
  [units]="'Temperature'"
  [bigSegments]="10"
  [smallSegments]="5"
  (select)="onSelect($event)">
</ngx-charts-gauge>

这是我的服务，我从中获取数据：

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




@Injectable()
export class ClassdataproviderService {

  public name: string;
  public value: string;

  single = [
    {
      name: '1',
      value: '15'
    },
    {
      name: '2',
      value: '20'
    }/*,
    {
      name: '3',
      value: '73'
    }*/
  ];



// Create a client instance
  client: any;
  packet: any;

  constructor() {



    // this.client = new Paho.MQTT.Client('broker.mqttdashboard.com', 8000,  'clientId-FUp9rr6sZS');
    this.client = new Paho.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080, 'Steffen');

    this.onMessage();
    this.onConnectionLost();
    // connect the client
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }

  // called when the client connects
  onConnected() {
    console.log('Connected');
    this.client.subscribe('node/m1/temperature');
    //this.sendMessage('HelloWorld');
  }

  sendMessage(message: string) {
    const packet = new Paho.MQTT.Message(message);
    packet.destinationName = 'node/m1/temperature';
    this.client.send(packet);
  }

  // called when a message arrives
  onMessage() {
    this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived : ' + message.payloadString);
      this.single.push({name: 'test', value: message.payloadString});
      console.log(this.single);
    };
  }

  // called when the client loses its connection
  onConnectionLost() {
    this.client.onConnectionLost = (responseObject: Object) => {
      console.log('Connection lost : ' + JSON.stringify(responseObject));
    };
  }

当我尝试使用 OnInit 在测量仪中注入数据时，仪表不会更新。为了解决这个问题，我尝试了OnChanges，但现在我得到了错误 TypeError：无法读取属性＆＃39; big＆＃39;未定义的...
我不知道是否可以在没有OnChanges的情况下自动更新仪表或如何避免使用OnChanges生命周期钩子的ERR？

Answer 1

现在我尝试了很多解决方案，最有效的方法是使用一个observable来观察我的服务，从中获取数据。服务，在ngx-chart-component中注入数据，具有可观察性，如下所示：

import { Injectable } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {Paho} from '../../../node_modules/ng2-mqtt/mqttws31';
import 'rxjs/add/observable/interval';
import {AddDataService} from './datawindow/addmqtt/formmqtt/addmqtt.service';

@Injectable()
export class ClassdataproviderService {
  public name: string;
  public value: string;

  single = [
    {
      name: '',
      value: ''
    }
  ];

// Create a client instance
  client: any;
  packet: any;

  constructor() {

   this.addDataService.componentMethodCalled$.subscribe(
  () => {
    this.client = new Paho.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080, 'Steffen');
    this.onMessage();
    this.onConnectionLost();
    // connect the client
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }}

  // called when the client connects
  onConnected() {
    console.log('Connected');
    this.client.subscribe('node/m1/temperature');
    //this.sendMessage('HelloWorld');
  }

  sendMessage(message: string) {
    const packet = new Paho.MQTT.Message(message);
    packet.destinationName = 'node/m1/temperature';
    this.client.send(packet);
  }

  // called when a message arrives
  onMessage() {
    this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived : ' + message.payloadString);
      this.single.push({name: 'test', value: message.payloadString});
      console.log(this.single);
    };
  }

  // called when the client loses its connection
  onConnectionLost() {
    this.client.onConnectionLost = (responseObject: Object) => {
      console.log('Connection lost : ' + JSON.stringify(responseObject));
    };
  }

现在每次获取新数据时，单个数组都将是updatetd，并且它与ngx-charts完美配合。并使用ngOnInit作为仪表组件中的生命周期。

Answer 2

更改检测无法识别您尝试修改的数据。

 this.data = this.classdataproviderServie.single;

请尝试分散数据，以检测更改。它对我有用。

 this.data = [...this.classdataproviderServie.single];

ngx-chart：显示实时数据，角度4.3

2 个答案: