Angular中获取接口返回数据时如何读取嵌套对象的id_warehouse属性

错误原因说明 #

• 写法data['war_id.id_warehouse']不符合 JavaScript 对象属性读取规则：方括号内的字符串仅匹配当前对象的单层键名，data对象下不存在名为war_id.id_warehouse的键，因此取值为undefined。
• 写法data['war_id']是将完整的war_id嵌套对象直接赋值给表单控件，控件渲染时会自动调用对象的toString()方法，因此输出[object Object]的默认结果。

正确读取方式 #

你可以任选以下两种合法写法获取id_warehouse的值：

1. 点符号读取（推荐，可读性更高） #

war_id:this.fb.group({
  id_warehouse: [data.war_id.id_warehouse]
})

2. 多层方括号读取（适合键名含特殊字符的场景） #

war_id:this.fb.group({
  id_warehouse: [data['war_id']['id_warehouse']]
})

可选兼容方案 #

如果存在接口返回时war_id为空的可能性，可以用可选链+空值合并运算符做异常兼容，避免代码运行报错：

war_id:this.fb.group({
  // 当war_id为空时，默认赋值null给表单控件
  id_warehouse: [data?.war_id?.id_warehouse ?? null]
})

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