Angular2如何访问JSON子节点？尝试代码后无法获取Id与parent求解答

首先得指出你当前代码的核心问题：你的orderList是一个对象而非数组，而*ngFor指令只能迭代数组或可迭代对象。直接遍历对象的话，拿到的其实是对象的键名（比如这里的ref1），所以order[0]自然得不到你想要的结果。

根据你的数据结构，分两种场景给你解决方案：

场景1：orderList包含多个类似ref1的动态键 #

如果你的orderList可能有多个类似ref1的键（比如ref2、ref3），需要遍历这些键对应的子节点，可以先把对象的键转换成数组：

组件代码 #

在组件类里添加一个getter方法，将对象的键转为数组：

get orderKeys(): string[] {
  return Object.keys(this.orderList);
}

视图代码 #

在模板里遍历这个键数组，再通过键访问对应的子节点：

<tr *ngFor="let key of orderKeys">
  <!-- 访问Id字段 -->
  <td>{{ orderList[key].Id }}</td>
  <!-- 遍历order数组，访问parent字段 -->
  <td>
    <span *ngFor="let item of orderList[key].order">
      {{ item.parent }}
    </span>
  </td>
</tr>

场景2：orderList只有ref1这一个固定键 #

如果ref1是固定的键名，不需要遍历顶层对象，直接访问即可：

视图代码 #

<!-- 直接获取ref1下的Id -->
<tr>
  <td>{{ orderList.ref1.Id }}</td>
</tr>

<!-- 遍历ref1下的order数组，获取每个item的parent -->
<tr *ngFor="let item of orderList.ref1.order">
  <td>{{ item.parent }}</td>
</tr>

这样就能正确拿到你需要的Id和parent字段啦！

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