Angular问题：对象有实际值但访问其属性返回undefined

核心原因 #

• TypeScript 接口仅为编译时类型约束，运行时不生效。你定义的CoordinateDto属性名如果和后端实际返回的JSON字段名不完全匹配（大小写、拼写、下划线格式差异），就会出现调试能看到对象整体有值，但访问指定属性返回undefined的情况。最常见的差异比如后端返回user_id（全小写下划线）、userId（驼峰），而你定义的是user_Id（i大写），或是koordinate拼写和后端返回的coordinate/Koordinate不一致。
• 你代码中的newCoords变量仅声明了类型，没有初始化实例，直接给其属性赋值会抛出错误，也是异常触发点之一。
• 若后端返回的接口响应是包裹结构（比如{code:200, data: [...], msg:'success'}），你直接把整个响应对象赋值给this.coordinates，也会导致后续遍历的对象结构不符合预期。

解决步骤 #

1. 先验证接口返回的实际结构：在subscribe回调中打印完整的data，展开console.log(coords)输出的对象，逐一核对每个属性的键名是否和CoordinateDto中定义的完全一致，修改接口定义和后端返回字段对齐即可。
2. 修复newCoords初始化逻辑，每次循环都生成新的实例，同时增加空值校验避免运行时报错：

parseMapCoordinates() {
  this.coordinates.forEach((coords) => {
    // 提前校验必要属性是否存在
    if(!coords?.koordinate) return;
    // 初始化新对象，避免引用异常
    const newCoords: MapCoordinates = {
      latitude: parseFloat(coords.koordinate.split(', ')[0]),
      longitude: parseFloat(coords.koordinate.split(', ')[1])
    } as MapCoordinates;
    this.mapCoordinates.push(newCoords);
  });
}

3. 若接口返回是包裹结构，调整赋值逻辑，取实际的数组字段赋值给this.coordinates，示例：

this.mapservice.getAllCoordinates().subscribe((res: any) => {
  // 假设实际数组存在于res.data字段，按你接口实际结构调整
  this.coordinates = res.data as CoordinateDto[];
  this.parseMapCoordinates();
  this.initLocation();
});

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