Javascript 使用typescript在chart.js的pieChart中异步显示数据

Javascript 使用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

我的角度项目中有以下设置:

HTML

<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
            })
          })
      }
    };
    ...
}