Angular中pieChartData里this.Goal未定义问题求解

这个问题我之前也碰到过，核心原因是类属性的初始化时机早于构造函数执行，咱们一步步拆解解决：

问题根源 #

你现在的代码里，pieChartData是作为类属性直接初始化的：

public pieChartData: number[] = [300, this.Goal];

而this.Goal是在构造函数里才被赋值的：

constructor() {
  this.Goal = this.data[0].YTDGoal;
}

在JavaScript/TypeScript的类初始化流程中，类属性的赋值会在构造函数执行之前完成。这时候this.Goal还没有被赋值（只是声明了变量，默认值是undefined），所以pieChartData里的第二个元素自然就是undefined了。

解决方案 #

这里有两种简单有效的解决方式：

方式1：在构造函数中初始化pieChartData #

等this.Goal赋值完成后，再创建pieChartData数组：

export class AppComponent {
  public pieChartData: number[]; // 先声明，不初始化
  Goal: number;
  data = [{ Id: 1, YTDGoal: 125000 }];

  constructor() {
    // 先给Goal赋值
    this.Goal = this.data[0].YTDGoal;
    // 再初始化pieChartData
    this.pieChartData = [300, this.Goal];
  }
}

方式2：使用getter动态返回pieChartData #

如果之后this.Goal可能会动态更新，用getter可以确保每次访问pieChartData时都是最新的值：

export class AppComponent {
  Goal: number;
  data = [{ Id: 1, YTDGoal: 125000 }];

  constructor() {
    this.Goal = this.data[0].YTDGoal;
  }

  // 用getter动态生成数组
  get pieChartData(): number[] {
    return [300, this.Goal];
  }
}

如果你的图表库需要监听数据变化（比如Chart.js），可能还需要在Goal更新后触发图表的重绘，但上面的两种方式已经能解决undefined的核心问题了。

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