Angular中如何读取API返回JSON里的嵌套jsonData字段？

你的实现思路是正确的，但存在两处细节问题需要修正，避免运行时报错：

1. 修正Observable转Promise的冗余写法 #

你当前代码中await lastValueFrom(await this.service.getAllUsers())存在冗余，因为this.service.getAllUsers()返回的是Observable类型，lastValueFrom直接接收Observable作为参数即可，不需要提前await。修正后的代码：

async getAllUsers() {
  this.allUsers = [];
  // 去掉多余的await，直接传入Observable给lastValueFrom
  this.allUsers = await lastValueFrom(this.service.getAllUsers());
  this.allUsers.forEach((node) => {
    if (node.jsonData) {
      node.jsonData = JSON.parse(node.jsonData);
    }
  });
}

2. 处理jsonData为null的边界情况 #

后端返回的第一个数据中jsonData为null，直接执行JSON.parse(null)虽然不会抛出错误，但后续在HTML中访问node.jsonData.Address时会触发空指针异常。因此需要先判断jsonData是否有值，再执行解析：

this.allUsers.forEach((node) => {
  // 仅当jsonData不为null/空字符串时才解析
  if (node.jsonData && typeof node.jsonData === 'string') {
    node.jsonData = JSON.parse(node.jsonData);
  }
});

3. HTML模板中添加安全导航操作符 #

为了彻底避免空指针错误，在HTML模板访问嵌套字段时，使用Angular的安全导航操作符?.：

{{ node.jsonData?.Address }}
{{ node.jsonData?.City }}
{{ node.jsonData?.PostalCode }}
{{ node.jsonData?.Country }}

修正以上三点后，你的实现就能稳定运行，正确解析并展示嵌套的JSON字段。

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