Angular 12请求返回对象可见members属性但直接访问为undefined的问题

问题根因及解决方案 #

你遇到的这个现象是前端开发中非常常见的异步+控制台特性组合导致的问题，核心原因有三类，按出现概率从高到低排序：

1. 浏览器控制台的懒求值特性 #

你打印整个cb对象时能看到members字段，实际上是浏览器控制台的延迟求值机制导致的：当你执行console.log(cb)时，浏览器只会在控制台输出对象的引用，不会立刻展开读取所有属性值；等你手动点击对象前的展开箭头时，才会实时读取对象当前的属性值。
也就是说你执行打印的时间点，members字段确实还不存在，等你点击展开对象的时候，后续的异步逻辑已经给cb对象补上了members属性，所以你能看到这个字段。而你直接打印cb.members是立刻求值，此时属性不存在，所以返回undefined。

验证方式：打印时对对象做序列化，拿到执行打印时刻的真实值：

console.log(JSON.stringify(cb, null, 2))

如果序列化结果中没有members字段，就可以确认是这个原因导致的。

2. 运行时实际返回字段与Interface定义不匹配 #

TypeScript的Interface只做编译期的类型校验，不会对运行时的实际数据做任何校验、转换。出现该问题大概率是接口返回的字段和你定义的不匹配：

• 字段名大小写不符：比如后端返回的是Members、MEMBERS，你定义的是小写的members
• 字段嵌套层级错误：比如members实际在cb.data.members层级下，你直接访问根层级的cb.members自然不存在

你可以直接打印Object.keys(cb)查看返回对象的所有真实字段名，确认是否和定义一致。

3. HttpClient返回体处理逻辑异常 #

检查你的getConferenceBridge方法中的请求配置，如果你配置了observe: 'response'，那么返回的是完整的HttpResponse对象，业务数据需要从body属性中读取：

// 正确写法
.subscribe((resp) => {
  this.conferenceBridge = resp.body;
  console.log(resp.body.members);
})

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