将来自 Spring Boot API 的数据显示到 Primeng 图表 Angular 中

Question

我有一个后端 api，我在其中创建了一个提供此 json 响应的 Web 服务：

[
 {
    "backgroundColor": "#36A2EB",
    "hoverBackgroundColor": "#36A2EB",
    "type": "SUCCESS",
    "value": 1
 }
]

这是我的 ts 代码：

data: any;
ngOnInit(): void {
this.dashboardService.getStatStatusOverall().subscribe((data)=>{
  this.data.datasets[0].data = data.map(a =>  a.value);
  this.data.datasets[0].backgroundColor = data.map(a =>  a.backgroundColor);
  this.data.datasets[0].hoverBackgroundColor = data.map(a =>  a.hoverBackgroundColor);
  this.data.labels = data.map(a =>  a.type);
  //this.chart.refresh();
})
}

这是我的html代码：

<p-chart type="doughnut" [data]="data"></p-chart>

我在控制台中收到此错误：“无法读取未定义的属性‘数据集’”

Answer 1

您没有初始化变量this.data。

试试下面的

data: { datasets: any[], labels: any[] } = { datasets: [], labels: [] };

ngOnInit(): void {
  this.dashboardService.getStatStatusOverall().subscribe((data) => {
    this.data = {
      datasets: [{
        data: data.map(a => a.value),
        backgroundColor: data.map(a => a.backgroundColor),
        hoverBackgroundColor: data.map(a => a.hoverBackgroundColor),
      }],
      labels: data.map(a => a.type)
    };
    // this.chart.refresh();
  });
}