显示来自 Spring 启动 API 的数据到 primeng 图表 Angular

Question

我有一个后端 api，我在其中创建了一个 Web 服务，它给出了 json 响应：

[
 {
    "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>

我在控制台中收到此错误：“无法读取未定义的属性 'datasets'”

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

显示来自 Spring 启动 API 的数据到 primeng 图表 Angular

Display data from Spring boot API into primeng chart Angular

spring-boot

primeng

angular