在HTTP响应中收到数据后，无法将数据分配给ng2 piechart

Question

我的HTML标记如下所示，我使用的是NG2图表库的piechart，它依赖于Chart.js:

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

我已经写了以下代码添加它的工作非常好。我可以看到该图，并获得对事件处理程序的调用。我的组件代码(工作)如下所示：

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';
import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';

import * as _ from 'underscore/underscore';
@Component({
selector:'home'
, templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
hotels: Hotel[];
hotelCountByCity; 
data = new PieChartData();
pieChartData = [];
pieChartLabels=[];
constructor(private _hotelsService: HotelsService){}
ngOnInit(){
this.getActiveHotelsByCity();        
console.log("On Init");
}
// events
public chartClicked(e:any):void {
// TODO : should open another chart which is not decided.
}
public chartHovered(e:any):void {
// TODO : do something
}
private getActiveHotelsByCity(){ 
//this.data.pieChartType = "pie";
this.pieChartLabels = ["One", "Two", "Three"]; 
this.pieChartData = [100,200,300];
}
}

但当我试图从web服务获取数据并将其分配给piechart时，我会出现奇怪的错误。我的组件代码(不工作)：

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';
import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';
import * as _ from 'underscore/underscore';
@Component({
selector:'home'
, templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
hotels: Hotel[];
hotelCountByCity; 
data = new PieChartData();
pieChartData = [];
pieChartLabels=[];
constructor(private _hotelsService: HotelsService){}
ngOnInit(){
this.getActiveHotelsByCity();        
console.log("On Init");
}
// events
public chartClicked(e:any):void {
// TODO : should open another chart which is not decided.
}

public chartHovered(e:any):void {
// TODO : do something
}
private getActiveHotelsByCity(){  
this._hotelsService.getAllActiveHotels()
.subscribe(
res => this.hotelCountByCity =
_.countBy(
res.data.hotels
,function(hotel: Hotel) {
return hotel.address.city;
})
,null
, ()=> {
this.pieChartLabels = _.keys(this.hotelCountByCity);
this.pieChartData = _.values(this.hotelCountByCity);
console.log("Reached success part of request");
}
);
}
}

我最初得到的错误堆栈压力如下：

异常：未捕获(在promise中)：类型错误：无法设置属性堆栈只有getter TypeError:无法设置只有getter的[object object]的属性堆栈在assignAL(http://localhost:3000/node_modules/zone.js/dist/zone.js:704:29)在ViewWrappedError.ZonewareError(http://localhost:3000/node_modules/zone.js/dist/zone.js:775:16)在ViewWrappedError.BaseError[作为构造函数](http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1104:38)在ViewWrappedError.WrappedError[作为构造函数](http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11133:20)在新ViewWrappedError(http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5106:20)位于_View_HomeComponent_Host0.DebugAppView.rethrowWithContext(http://localhost:3000/node_modules/@角/芯/束/芯。umd.js:9427:27)位于_View_HomeComponent_Host0.DebugAppView.detectChanges(http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9413:22)在ViewRef_ detectChanges(http://localhost:3000/node_modules/@角/芯/束/芯。umd.js:7398:24)在RouterOutlet.activate(http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3548:46)位于ActivateRoutes.placeComponentIntoOutlet(http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20)在ActivateRoutes.ActivateRoutes(http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2933:26)在eval(http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23)在Array.forEach(本地)在ActivateRoutes.activateChildRoutes(http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2901:33)在ActivateRoutes.activate(http://localhost:3000/node_modules/@angular/router/bundle/router.umd.js:2896:18)

在互联网上搜索后，我意识到这不是真正的错误。我在网上找到了一些建议来定位真正的错误，我发现的真正错误是：

"TypeError:Chart.controllers[meta.type]不是构造函数在Chart.Controller(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24)位于Object.helpers.each(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:9345:15)位于Chart.Controller.buildOrUpdateControllers(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8497:12)在Chart.Controller.initialize(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8356:7)在新的Chart.Controller(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6)在新图表(http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:10684:21)位于BaseChartDirective.getChartBuilder(http://localhost:3000/node_modules/ng2-charts/componentschartscharts.js:73:16)位于BaseChartDirective.refresh(http://localhost:3000/node_modules/ng2-charts/componentschartscharts.js:114:27)位于BaseChartDirective.ngOnInit(http://localhost:3000/node_modules/ng2-charts/componentschartscharts.js:18:18)位于Wrapper_BaseChartDirective.detectChangesInputProps(/ChartsModule/BaseChartDirective/wapper.ngfactory.js:89:53)位于_View_HomeComponent0.detectChangesInternal(/AppModule/HomeComponent/component.ngfactory.js:74:32)位于_View_HomeComponent0.AppView.detectChanges(http://localhost:3000/node_modules/@角/芯/束/芯。umd.js:9305:18)位于_View_HomeComponent0.DebugAppView.detectChanges(http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)位于_View_HomeComponent_Host0.AppView.detectViewChildrenChanges(http://localhost:3000/node_modules/@角/芯/束/芯。umd.js:9331:23)在_View_HomeComponent_Host0.detectChangesInternal(/AppModule/HomeComponent/host.nfactory.js:33:8)">

我不知道从这里到哪里。我已经在ng2图表gihub回购上发布了问题。我陷入困境，我将非常感谢你的帮助。

Answer 1

我在互联网上做了一些研究并阅读了文档。我找不到我的问题的确切答案。以下过程对我有效：

1. 我将chart.js从2.4.0降级到2.3.0
2. 我在组件中添加了布尔值，以指示是否从RESTApi接收到数据。我使用该标志来使用*ngIf显示画布

HTML标记如下所示：

<canvas 
baseChart 
class="chart"
[data]="data.pieChartData"
[labels]="data.pieChartLabels"
[chartType]="data.pieChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"
*ngIf="isDataAvailable"
>
</canvas>