如何在API调用完成后为mdbCharts加载数据并解决配置报错

核心问题与你判断的一致：mdbChart组件在DOM初始化时会立即读取绑定的配置项，此时异步接口尚未返回数据，空的datasets、labels数组会触发配置校验错误；同时你使用的数组push操作属于内部值变更，Angular默认变更检测可能无法触发第三方组件的重绘逻辑。

具体解决步骤 #

• 步骤1：新增加载状态变量控制图表渲染，从根源避免空配置初始化，同时修改数组赋值逻辑主动触发变更检测

public chartType: string = 'pie';
public chartDatasets: Array<PieChart> = [];
public chartLabels: Array<String> = [];
// 新增加载状态标记
public isChartReady = false;
// 若未定义chartColors、chartOptions请补充默认值，否则会引发属性绑定错误
public chartColors = [];
public chartOptions = {};

getPieChartData() {
    let element: PieChart = {data: [], label: ""};
    this.dashboard.getUniqueProductUsers().subscribe(data => {
      // 用临时变量存储中间结果，避免多次变更触发不必要的检测
      const tempLabels: string[] = [];
      const chartValue: number[] = [];
      for(let uniqueProductUser of data.uniqueProductUser) {
        tempLabels.push(uniqueProductUser.product_type_info);
        chartValue.push(parseInt(uniqueProductUser.userscount))
      }
      element.data = chartValue;
      element.label = "Product Traffic";
      // 直接替换数组引用而非push，确保组件能检测到输入变更
      this.chartLabels = tempLabels;
      this.chartDatasets = [element];
      // 数据处理完成，标记为可渲染
      this.isChartReady = true;
    })
}

• 步骤2：修改HTML代码，加入加载状态判断，等数据就绪后再渲染图表组件

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

可选替代方案 #

如果你不想通过*ngIf控制组件渲染，也可以在初始化时给配置项赋合法的初始占位值，等接口返回后再替换为真实数据即可：

// 初始赋值合法的空配置
public chartDatasets: Array<PieChart> = [{data: [0], label: '加载中'}];
public chartLabels: Array<String> = ['加载中'];

内容的提问来源于stack exchange，提问作者Piyush