Impossible d'initialiser les graphiques ngx avec les données récupérées par l'API

Question

Je rencontre des problèmes lorsque j'essaie d'initialiser un graphique créé à l'aide de ngx-charts avec des données récupérées par l'API.

J'ai construit un api de repos qui, lors d'un appel approprié, crache des données de séries chronologiques.

{ 
    "prices": [ 
     { 
      "item": "1", 
      "price": 2, 
      "estimated": 2.1, 
      "date": [ 
       2012, 
       8, 
       16 
      ] 
     }, 
     { 
      "item": "1", 
      "price": 3, 
      "estimated": 4.1, 
      "date": [ 
       2012, 
       9, 
       16 
      ] 
     }, 
     { 
      "item": "1", 
      "price": 5, 
      "estimated": 7.1, 
      "date": [ 
       2012, 
       10, 
       16 
      ] 
     } 
    ] 
} 

Et je construit price.model.ts pour gérer correctement, et il fonctionne très bien

export class PriceModel { 
    public id: string; 
    public price: number; 
    public estimated: number; 
    public date: number[]; 

    constructor(
     id: string, 
     price: number, 
     estimated: number, 
     date: number[] 
    ) { 
     this.id = id; 
     this.price = price; 
     this.estimated = estimated; 
     this.date = date; 
    } 
} 

Ensuite, je mets mes details.component.ts pour effectuer un tel appel api, obtenir les données, analyser et le rendre dans le tableau.

import { Component } from '@angular/core'; 
import { NgxChartsModule } from '@swimlane/ngx-charts'; 
import { Http } from '@angular/http'; 

/** App Models **/ 
import { PriceModel } from '../../shared/components/prices/price.model'; 
import { ChartDataModel } from '../../shared/components/prices/chart-data.model'; 

@Component({ 
    selector: 'app-details', 
    templateUrl: './details.page.html', 
    providers: [NgxChartsModule] 
}) 

export class DetailsPage { 

    private sub: any; 
    private prices: PriceModel[]; 
    ngxData: ChartDataModel = { 
    data: [ 
     { 
     name: 'prices', 
     series: [] 
     }, 
     { 
     name: 'forecast', 
     series: [] 
     } 
    ] 
    }; 

    view: any[] = [1000, 750]; 

    // options 
    showXAxis = true; 
    showYAxis = true; 
    gradient = false; 
    showLegend = true; 
    showXAxisLabel = true; 
    xAxisLabel = 'Dates'; 
    showYAxisLabel = true; 
    yAxisLabel = 'Prices'; 

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

    // line, area 
    autoScale = true; 

    constructor(private _http: Http) { 
    console.log(this.ngxData.data); 
    Object.assign(this.ngxData); 
    } 

    ngOnInit() { 
    this.sub = this._http.get('someroute').subscribe((prices) => { 
     this.prices = prices.json().prices; 
     let currData; 
     this.prices.map((p) => { 
      currData = new Date(p.date[0], p.date[1], p.date[2]); 
      this.ngxData.data[0].series.push({ name: currData.getTime().toString(), value: p.price }); 
      this.ngxData.data[1].series.push({ name: currData.getTime().toString(), value: p.estimated }); 
     }); 
     }, (err) => { 
     console.log(err); 
    }); 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

} 

Où mes ChartDataModel.ts est défini comme

export class ChartDataModel { 
    public data: SerieModel[]; 
    constructor(data: SerieModel[]) { 
     this.data = data; 
    } 
} 

export class SerieModel { 
    public name: string; 
    public series: SeriersChildModel[]; 
    constructor(name: string, series: SeriersChildModel[]) { 
     this.name = name; 
     this.series = series; 
    } 
} 

export class SeriersChildModel { 
    public name: string; 
    public value: number; 
    constructor(name: string, value: number) { 
     this.name = name; 
     this.value = value; 
    } 
} 

Et enfin, voici mon details.page.html

<ngx-charts-line-chart 
    [view]="view" 
    [scheme]="colorScheme" 
    [results]="ngxData.data" 
    [gradient]="gradient" 
    [xAxis]="showXAxis" 
    [yAxis]="showYAxis" 
    [legend]="showLegend" 
    [showXAxisLabel]="showXAxisLabel" 
    [showYAxisLabel]="showYAxisLabel" 
    [xAxisLabel]="xAxisLabel" 
    [yAxisLabel]="yAxisLabel" 
    [autoScale]="autoScale"> 
</ngx-charts-line-chart> 

Logging this.ngxData.data avant tout Object.assign impression juste bien

Mais je finis par avoir le résultat suivant

J'ai suivi l'exemple disponible here mais a fini sans affichage de données réellement. Je ne comprends pas pourquoi, même si les données sont formatées comme le souhaite la bibliothèque, les données ne sont pas affichées.

Qu'est-ce que je fais mal? Est-ce causé par une mauvaise initialisation dans le constructeur?

Answer 1

Votre problème concerne la modification des séries par ngxData.data[x]series.push() ne reconnaît pas par la détection des modifications.

Réaffectation ngxData.data devraient être détectés: this.ngxData.data = [...this.ngxData.data]

ngOnInit() {  
    this.sub = this._http.get('someroute').subscribe((prices) => { 
     this.prices = prices.json().prices; 
     let currData; 
     this.prices.map((p) => { 
      currData = new Date(p.date[0], p.date[1], p.date[2]); 
      this.ngxData.data[0].series.push({ name: currData.getTime().toString(), value: p.price }); 
      this.ngxData.data[1].series.push({ name: currData.getTime().toString(), value: p.estimated }) 
     }); 
     //your solution 
     this.ngxData.data = [...this.ngxData.data]; 
     }, (err) => { 
     console.log(err); 
    }); 
    } 

J'ai réussi à ajouter un plunker https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview