Angular环境中JavaScript Array push返回异常长度问题

你遇到的问题和Angular的变更检测机制直接相关：

• 当你在模板的*ngFor里调用loadData()时，Angular的变更检测周期会反复执行这个函数——比如组件初始化、用户交互、数据更新等场景都会触发检测，每次检测都会跑一遍loadData。
• 因为push是修改原数组userData的引用，每次执行loadData都会往同一个数组里追加两个元素，所以控制台打印的长度会是2、4、6……而非固定的2。
• 而返回新数组时，每次调用loadData都会创建一个全新的数组，长度自然固定为2；非Angular环境下你只调用了一次loadData，所以push的结果符合预期。

方案1：把数据初始化移到生命周期钩子（推荐） #

把loadData的逻辑放到组件的ngOnInit里，只在组件初始化时执行一次，避免重复修改数组：

userData: any[] = [];

ngOnInit(): void {
  this.loadData();
}

loadData(): void {
  this.userData.push('元素1', '元素2');
  console.log(this.userData.length); // 稳定输出2
}

模板里直接遍历预初始化好的userData：

<div *ngFor="let item of userData">{{ item }}</div>

方案2：强制返回新数组（不推荐，影响性能） #

如果一定要在模板里调用函数，确保每次都生成新数组，不修改原数组的引用：

loadData(): any[] {
  const tempArr = [];
  tempArr.push('元素1', '元素2');
  console.log(tempArr.length); // 每次输出2
  return tempArr;
}

模板写法不变，但要注意：这种方式会在每次变更检测时创建新数组，频繁触发会导致不必要的性能损耗，只适合极端场景。

永远不要在Angular模板绑定（比如*ngFor、插值表达式）里编写有副作用的逻辑——比如修改数组、改变组件属性、调用异步接口等。变更检测的高频执行会让这些逻辑反复运行，引发不可预期的状态变化和性能问题。

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