ngx-chart: Afficher les données en direct, angulaire 4.3

Question

Je souhaite visualiser des données en direct dans la jauge ngx-chart.
Je construis cela avec cette démo: https://swimlane.gitbooks.io/ngx-charts/content/v/6.0.2/charts/gauge.html
Je reçois mes livesata d'un Service et je veux afficher les données dans la jauge ngx-chart. Je reçois les données du Service ClassdataproviderService, qui enregistre les objets dans le tableau 'single'.
Ceci est mon composante NGX-chart calibre:

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); 
    } 
} 

Ce ist le 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> 

Et ceci est mon service, où je reçois la données de:

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)); 
    }; 
    } 

Lorsque j'essaie d'injecter les données dans la jauge avec OnInit, la jauge n'est pas mise à jour. Pour résoudre ce que j'ai essayé OnChanges, mais maintenant je reçois le ERREUR TypeError: Impossible de lire la propriété «grand» de undefined ...
Je ne sais pas s'il est possible de mettre à jour automatiquement la jauge sans OnChanges ou comment éviter le ERR avec le hook de cycle de vie OnChanges?

Answer 1

Maintenant, j'ai essayé de nombreuses solutions et le plus efficace est en utilisant un observable, d'observer mon service où je reçois les données. Le service, qui injecte les données dans la composante NGX-diagramme, withe l'observable, ressemble à:

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)); 
    }; 
    } 

Maintenant, le seul tableau sera updatetd chaque fois que je reçois de nouvelles données et il fonctionne parfaitement avec des graphiques de NGX- . Et utilisez ngOnInit comme lifecyclehook dans le composant jauge.