异步显示来自chart.js的带打字稿的pieChart中的数据

Question

我在Angular项目中具有以下设置：

HTML

<canvas baseChart 
[data]="pieChartData" 
[labels]="pieChartLabels" 
[colors]="pieChartColours" 
[chartType]="pieChartType">
</canvas>

TS

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

使用此设置，因为我通过ngOninit（）中的API调用将数据分配给变量，所以我的pieChart中不会显示数据。有人知道我该如何解决吗？

Answer 1

尝试使用ngOnChanges（）来侦听数据更改并相应地更新变量。