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

Question

我想要显示ngx-chart-gauge中的一些实时数据。
我用这个演示来构建它： https://swimlane.gitbooks.io/ngx-charts/content/v/6.0.2/charts/gauge.html
我从服务中获得我的livedata，并且想要在ngx-chart-gauge中显示数据。我从服务ClassdataproviderService获取数据，该数据将对象保存在数组“单个”中。
这是我NGX-图号组件：

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-排行榜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：无法读取未定义的属性'大'...
我不知道是否有可能自动更新仪表自动没有OnChanges或如何避免ERR与OnChanges生命周期挂钩？

Answer 1

现在我尝试了很多解决方案，最有效的是通过使用可观察的来观察我从哪里获取数据的服务。该服务中注入的NGX-图组分的数据，枝条可观察到的，看起来像：

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-图表完美的作品。 并使用ngOnInit作为生命周期在量表组件中。