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作爲生命週期在量表組件中。