如何在 api 调用后加载 mdbCharts 中的数据？

Question

我正在使用 mdbChart 加载饼图。我需要在执行 API 调用后加载数据。但是显示错误。

我的代码是：

public chartType: string = 'pie';
public chartDatasets: Array<PieChart> = new Array<PieChart>();
public chartLabels: Array<String> = [];

getPieChartData() {
    let element: PieChart = {data: [], label: ""};
    this.dashboard.getUniqueProductUsers().subscribe(data => {
      let chartValue: Array<number> = new Array();
      for(let uniqueProductUser of data.uniqueProductUser) {
        let obj: any = { ...uniqueProductUser };
        this.chartLabels.push(uniqueProductUser.product_type_info);
        chartValue.push(parseInt(obj.userscount))
      }
      element.data = chartValue;
      element.label = "Product Traffic";
      this.chartDatasets.push(element);
      console.log(this.chartDatasets);
    })
  }

接口是：

export interface PieChart {
  data: Array<number> ;
  label: String;
}

而HTML代码如下：

<canvas mdbChart
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true">
        </canvas>

在将数据推送到阵列之前，我能够理解正在加载。这就是我收到配置错误的原因。我该如何解决这个问题？

Answer 1

在准备好图表数据集之前不要加载图表：

<canvas mdbChart *ngIf="chartDatasets.length"
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true">
        </canvas>

如何在 api 调用后加载 mdbCharts 中的数据？

How to load the data in mdbCharts after the api call?

charts

angular