Javascript 使用typescript在chart.js的pieChart中异步显示数据
我的角度项目中有以下设置: HTMLJavascript 使用typescript在chart.js的pieChart中异步显示数据,javascript,angular,typescript,asynchronous,chart.js,Javascript,Angular,Typescript,Asynchronous,Chart.js,我的角度项目中有以下设置: HTML <canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [colors]="pieChartColours" [chartType]="pieChartType"> </canvas> 使用此设置,我的pieChart中将不会显示数据,因为我将数据分配给ngOninit()中API调用的变量。有人知道我如何解决这个问题吗?尝试使用ngOnChange
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[colors]="pieChartColours"
[chartType]="pieChartType">
</canvas>
使用此设置,我的pieChart中将不会显示数据,因为我将数据分配给ngOninit()中API调用的变量。有人知道我如何解决这个问题吗?尝试使用ngOnChanges()来监听数据更改并相应地更新变量
export class ValidationResultComponent implements OnInit {
...
Success
Allowed
Failed
pieChartLabels:string[] = ['Success', 'Allowed', 'Failed'];
pieChartData:number[] = [this.Success, this.Allowed, this.Failed];
pieChartType:string = 'pie';
pieChartColours:any[] = [{ backgroundColor: ["#bff0aa","#f2e69d", "#e0a2a2"] }]
constructor(
private notificationService: NotificationService,
private codeValidationService: CodevalidationService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
let that = this;
this.dtOptions[0] = {
...
ajax: (dataTablesParameters: any, callback) => {
that.codeValidationService.getCodeValidationResults('id')
.subscribe(
(responses) => {
var logDetails = responses['results'][0]['stats'].map( stats => {
if(stats.action === "# Successful services"){
this.Success = stats.times
}
if(stats.action === "# Failed services"){
this.Failed = stats.times
}
if(stats.action === "# Allowed Exceptions"){
this.Allowed = stats.times
}
return {
'name': this.checkNull(stats.action),
'status': this.checkNull(stats.times),
}
})
callback({
data: logDetails
})
})
}
};
...
}