Hoje estou começando a trabalhar comAngular2e tenha uma pergunta com a estruturang2-charts.

Aqui está o meucomponent.ts código:

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent{

  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {}

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void{
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.pieChartLabels = labels;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}

}

ocomponent.html código:

<div style="display: block">
  <canvas baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

O código de serviço:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class PredictionService {

  private baseUrl: string = 'http://localhost:8080/predict/';
  constructor(private http : Http){
  }

  getPredictions(text :string) {
    return this.http.get(this.baseUrl + text).map(res => res.json());
  }

}

Com os códigos acima, aqui está o que eu tenho, um gráfico sem cores:

De fato, quando examinei profundamente meu código, o componente HTML pegou as variáveis no início e as atualizou. Portanto, quando os rótulos estiverem vazios, mesmo que eu adicione alguns, eles serão adicionados como indefinidos. Então, eu tenho um gráfico com os valores certos, mas não os rótulos certos. Tudo marcado como indefinido.

E se eu iniciar os rótulos no início, terei um bom gráfico colorido com os valores certos

Então, minhas perguntas são:

Como carregar os dados e renderizar o componente HTML?

Existe alguma maneira de renderizar o componente chart.js sem dados e atualizá-lo com rótulos e dados corretos?

Qualquer ajuda é necessária, obrigado.