使用ngx-charts-bar-vertical-stacked报错：Cannot read property 'length' of undefined

嘿，这个问题我之前用ngx-charts时也踩过坑！错误Cannot read property 'length' of undefined的核心原因其实很简单——你只声明了数组变量，但没有初始化它。

问题根源 #

你在app.ts里写了：

chartDataNGX: any[];

这时候chartDataNGX的初始值是undefined，而不是一个空数组。当你调用this.chartDataNGX.push(...)时，本质是在给一个undefined的对象调用方法，而ngx-charts组件在渲染过程中会尝试读取数组的length属性，自然就触发了这个报错。

修复步骤 #

只需要在声明数组的时候直接初始化为空数组即可：

// 修改后的声明代码
chartDataNGX: any[] = [];

完整修复后的代码示例 #

// app.ts中
chartDataNGX: any[] = []; // 关键：初始化空数组

constructor() {
  this.getChartData();
}

getChartData() {
  this.chartDataNGX.push(
    {"name": "TEST2","series": [ {"name": "Target","value": 40632}, {"name": "Actual","value": 36953}, {"name": "Projected","value": 31476} ]},
    {"name": "TEST3","series": [ {"name": "Target","value": 40632}, {"name": "Actual","value": 36953}, {"name": "Projected","value": 31476} ]}
  );
}

额外小提示 #

如果之后你的图表数据是通过异步请求（比如HTTP接口）获取的，建议在模板中给图表组件加上空值判断，避免组件在数据加载完成前尝试渲染：

<ngx-charts-bar-vertical-stacked
  *ngIf="chartDataNGX && chartDataNGX.length > 0"
  [results]="chartDataNGX"
  ...其他配置属性
>
</ngx-charts-bar-vertical-stacked>

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