Angular中向数组追加API返回值时数组为Undefined的问题及TypeScript正确数组追加方法

先直接拆解你遇到的核心问题：this.customerInfo变成undefined导致push操作失败，主要是这几个原因在作祟：

1. @Input 属性的默认值被父组件传递的 undefined 覆盖 #

你写的@Input() customerInfo?: CustomerInfo []=[];存在一个Angular新手常踩的坑：当父组件显式传递undefined给这个输入属性时，Angular会直接覆盖你设置的默认空数组，让customerInfo变成undefined。只有当父组件完全不传递这个输入时，默认值才会生效。

2. 代码里的拼写小错误（大概率是你输入时的笔误，但会直接破坏逻辑） #

• 初始化钩子函数名写错：ngOnIit应该是ngOnInit，如果这个函数名拼错，Angular根本不会触发初始化逻辑（不过你说API已经调用了，应该是你贴代码时的手滑）。
• 变量名拼写不一致：你定义的是refrences = ["jack1","ana12"]，但getCustomerInfo里循环的是references，这会导致循环变量未定义，请求根本发不出去（同样，你说API能调用，应该是贴代码时的笔误）。

3. 异步回调中未做数组存在性兜底 #

就算默认值逻辑没问题，在异步回调里操作数组前，最好先确认数组的状态，避免意外的undefined打断操作。

修复后的完整代码示例 #

第一步：正确处理@Input的默认值 #

改用setter方式定义输入属性，确保无论父组件传什么，customerInfo始终是一个数组：

export interface CustomerInfo { 
  firstName: string; 
  middleName: string; 
  lastName: string; 
  dateOfBirth: Date; 
} 

// 用私有变量存储数组，通过setter处理输入值
private _customerInfo: CustomerInfo[] = [];
@Input() set customerInfo(value: CustomerInfo[] | undefined) {
  // 父组件传undefined/null时，自动替换为空数组
  this._customerInfo = value ?? [];
}
// 对外暴露只读的数组访问器
get customerInfo(): CustomerInfo[] {
  return this._customerInfo;
}

// 修正变量名拼写
references = ["jack1","ana12"];

第二步：修复钩子函数+优化API请求 #

用forkJoin合并多个API请求，避免创建一堆零散的订阅，同时确保数组操作的安全性：

// 修正钩子函数名
ngOnInit() { 
  // 现在数组永远不会是undefined，只需检查长度即可
  if (this.customerInfo.length === 0) { 
    this.getCustomerInfo(); 
  } 
} 

getCustomerInfo() { 
  // 把多个API请求打包成一个流
  const requests = this.references.map(reference => 
    this.customerService.getCustomerInfo(reference)
  );

  forkJoin(requests).subscribe({
    next: (values) => {
      // 一次性追加所有返回结果，比循环push更高效
      this._customerInfo.push(...values);
      console.log("更新后的客户信息: ", this.customerInfo);
    },
    error: (error) => {
      console.log("获取客户信息失败: ", error);
    }
  });
}

如果不想用setter，也可以在push前做兜底 #

要是你坚持原来的@Input定义，那就在异步回调里加一行兜底代码：

// 在subscribe的next回调中
value => { 
  console.log("当前customerInfo状态: ", this.customerInfo); 
  console.log("返回的单条客户信息: ", value); 
  // 兜底：如果customerInfo是undefined，先初始化为空数组
  this.customerInfo = this.customerInfo ?? [];
  this.customerInfo.push(value); 
}

额外小建议 #

• 别在循环里创建独立订阅，用forkJoin（适合无依赖的并行请求）或concatMap（适合有依赖的串行请求）管理异步流，既方便取消订阅，也能统一处理错误。
• 处理@Input的null/undefined输入时，setter是最可靠的方式，能保证组件内部状态始终一致。

内容的提问来源于stack exchange，提问作者Kim-Jun-Un