使用Chart.js时遇TypeError: item is null错误，求排查解决

看起来你在Angular应用里遇到了图表初始化时的空值错误，我帮你一步步排查和解决：

1. 先修正模板里的this引用问题 #

在Angular模板中完全不需要用this来访问组件属性，你直接写data.labels和data.charta就可以了。模板里用this会导致属性查找失败，这大概率是引发item is null的直接原因之一。

修改后的模板代码：

<h1>A</h1>
<app-chart *ngIf="dataLoaded | async" [type]="'charta'" [data]="{labels: data.labels, readings: data.charta}"></app-chart>
<h1>B</h1>
<app-chart *ngIf="dataLoaded | async" [type]="'chartb'" [data]="{labels: data.labels, readings: data.chartb}"></app-chart>

2. 强化数据就绪的判断逻辑 #

即使dataLoaded的异步管道返回true，也有可能data本身还没被完整赋值，或者某个字段（比如charta）是null。你可以在组件类里加一个更严格的判断：

// 组件类中新增属性
get isDataFullyReady(): boolean {
  return this.dataLoaded.value && this.data?.labels?.length && this.data?.charta?.length;
}

然后把模板里的*ngIf改成：

<app-chart *ngIf="isDataFullyReady" [type]="'charta'" [data]="{labels: data.labels, readings: data.charta}"></app-chart>

这样能确保图表需要的核心数据都存在后，才渲染组件，避免传递空值。

3. 在图表组件内部做空值防御 #

如果问题出在图表组件的内部逻辑，建议在子组件里对传入的data做前置检查：

// 图表组件类中
@Input() set data(chartData: {labels?: any[], readings?: any[]}) {
  // 确保数据完整后再初始化图表
  if (chartData?.labels && chartData?.readings && chartData.labels.length === chartData.readings.length) {
    this.initChart(chartData);
  } else {
    console.warn('图表数据不完整，跳过初始化');
  }
}

4. 排查数据拉取的完整性 #

最后你可以在数据拉取的逻辑里加个日志，确认服务器返回的数据结构是否符合预期：

// 组件类中拉取数据的地方
this.yourDataService.fetchDashboardData().subscribe(res => {
  this.data = res;
  console.log('服务器返回的数据:', res); // 检查labels、charta等字段是否为null
  this.dataLoaded.next(true);
});

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