Круговая диаграмма не работает с использованием угловых и ng2-диаграмм

Question

Мне нужно отобразить мой тип пользователей в круговой диаграмме. Я использую Angular2, Chart.js и ng2-диаграммы.

dashboard.component.ts:

export class DashboardComponent implements OnInit {
    employees = {}; 
    public countFree : number = 0;
    public countPaid : number = 0;
    public chartData: Array<Object> = [];
    public chartLabels: Array<Object> = [];

    constructor(private dashboard: DashboardService) { }

    ngOnInit() {
    this.dashboard.fetchData('http://localhost:8080/employees').subscribe(res => {
        res.forEach(function (eachObj) {
            if(eachObj.usertype=='Free') 
                this.countFree++;
            else
                this.countPaid++;
        }.bind(this));
        this.chartLabels = ['Paid Users', 'Free Users'];
        this.chartData = [{ data: [this.countPaid, this.countFree++] }];
    });
}

}

dashboard.component.html:

<div style="width: 40%;">
 <canvas
   baseChart
   [chartType]="'pie'"
   [datasets]="chartData"
   [labels]="chartLabels"
   [options]="chartOptions"
   [legend]="true"
  </canvas>
</div>

Я получаю сообщение об ошибке «Ошибка типа: невозможно прочитать свойство« данные »из неопределенного». Если я размещу код диаграммы за пределами fetchData (), он будет работать нормально. Но мне нужно, чтобы countFree и countPaid отображались в виде данных диаграммы.

Нужна помощь кого-то.

Answer 1

Возможно, это не лучшее решение, но вы можете попробовать это:

<div style="width: 40%;" *ngIf="chartData">
 <canvas
   baseChart
   [chartType]="'pie'"
   [datasets]="chartData"
   [labels]="chartLabels"
   [options]="chartOptions"
   [legend]="true"
  </canvas>
</div>