Aktualisierung von ng-charts Balkendiagramm-Datensätze in angular 2

Question

Wie aktualisiert man das Balkendiagramm von angular2? Ich versuche, [datasets]="barChartData" In Vorlage auf Klick neuen Eintrag hinzuzufügen, sieht Graph wie folgt aus:

<canvas baseChart #myChart 
[datasets]="barChartData" 
[labels]="barChartLabels" 
[options]="barChartOptions" 
[legend]="barChartLegend" 
[chartType]="barChartType" 
(chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas> 

Ich versuchte folgenden empfohlenen Methoden: 1) Geänderte Datensatzes Variable direkt - die Daten geklont, verändert sie und dann zugewiesen es. Auf diese Weise kann ich existierende Daten ändern/aktualisieren, aber ich kann keinen neuen Eintrag zum Datensatz hinzufügen.

2) ChangeDetectorRef, Ich habe private Ref: ChangeDetectorRef zum Konstruktor hinzugefügt und ref.detectChanges() auf Updates aufgerufen. aber kein Glück. Ich habe auch versucht, ApplicationRef zu verwenden.

In beiden Fällen, im Debug-Fenster, kann ich sehen, dass barChartData mit neuen Werten in TS-Datei aktualisiert wird, aber Vorlage (HTML) wird nicht aktualisiert/aktualisiert.

Answer 1

Nach einem Tag der Qual fand ich eine Arbeitslösung: zuerst müssen Sie importieren Richtlinie:

import {BaseChartDirective} from 'ng2-charts/ng2-charts' 

dann Diagramm in Klasse verweisen:

@ViewChild(BaseChartDirective) 
public chart: BaseChartDirective; 

Jetzt können Sie Ihr Diagramm Zugang in Vorlage mit Diagrammobjekt. Dann legen Sie diesen Code, wenn Sie Ihr Diagramm aktualisieren möchten:

this.chart.ngOnChanges({} as SimpleChanges); 

Stellen Sie sicher, dass Sie leeres Objekt als Typ SimpleChanges passieren. ngOnChanges wird das Diagramm nur dann neu zeichnen, wenn das Argument ein leeres Objekt ist.

Bitte beachten Sie, dass Sie den Verweis auf Datasets klonen und ändern müssen, bevor Sie ngOnChanges aufrufen. In meinem Fall habe ich dies getan, um Grafik zu aktualisieren: `

this.barChartData = clone; 
this.chart.datasets = this.barChartData; 
this.chart.ngOnChanges({} as SimpleChanges);`