Angular 从Observable填充下拉菜单出现id/push属性未定义报错如何解决？

错误根因分析 #

• 报错Cannot read properties of undefined (reading 'push')是前置优先级更高的问题：你仅对dropdownList做了类型声明，没有初始化空数组，它的默认值为undefined，自然无法调用数组的push方法。
• 报错Cannot read properties of undefined (reading 'id')由两个逻辑错误共同导致：
  1. 服务的loadFoodTypes是async函数，但没有显式设置返回值，async函数无返回值时，默认返回的Promise resolve结果为undefined，你在调用时拿到的response本身就是空值
  2. 接口返回的是FoodType[]数组类型，你在调用时直接将它当作单个FoodType对象取属性，类型完全不匹配，即使拿到返回值也读不到正确的id属性。

修复步骤 #

步骤1：初始化下拉数组 #

修改数组声明，给它赋初始空数组，解决push报错问题：

dropdownList: Array<{id: number, description: string}> = [];

步骤2：修正服务方法的返回逻辑 #

服务方法不要混用await和then，调整后补充返回值：

async loadFoodTypes(): Promise<FoodType[]> {
  const api: string =  environment.apiAddress + 'FoodType';
  try {
    const response = await this.httpClient.get<FoodType[]>(api).toPromise();
    this._foodType.next(response);
    return response; // 新增返回接口请求结果
  } catch (err) {
    console.log(err);
    return []; // 异常时返回空数组，避免后续逻辑报错
  }
}

步骤3：修正数组填充逻辑 #

接口返回的是FoodType数组，需要遍历后逐个插入下拉数组，不要直接当作单个对象取值：

async loadFoodTypes(){
  const foodTypeList = await this.foodtypesService.loadFoodTypes();
  // 遍历返回的数组完成赋值，增加空值判断避免id为undefined的异常
  foodTypeList.forEach(item => {
    if (item.id) {
      this.dropdownList.push({id: item.id, description: item.description});
    }
  })
}

额外优化建议 #

你可以用数组方法简化赋值逻辑，不需要手动遍历push：

this.dropdownList = foodTypeList.filter(item => item.id).map(item => ({
  id: item.id, 
  description: item.description
}))

另外Angular的HttpClient返回的Observable可以直接结合模板的async pipe渲染下拉列表，不需要转Promise手动维护数组，代码会更简洁。

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