Angular中如何正确处理多级JSON响应？

我来帮你一步步解决这两个问题，咱们先从根因入手：

问题1：无法访问对象属性 & 类型不匹配 #

你当前的接口定义有几个关键问题：

• 缺少Children属性，完全没覆盖API返回的树形结构
• Attributes.ReadOnly的类型错误（API返回的是布尔值false，你写成了string）
• 更重要的是：API返回的是单个根节点对象，不是Hana[]数组，这直接导致了类型不匹配，所以访问hana.Id会报错

修正接口与服务/组件 #

首先，更新你的Hana接口为递归结构（因为子节点和父节点结构完全一致）：

export interface Hana {
  Id: string;
  Attributes: { ReadOnly: boolean }; // 修正为布尔类型
  Children?: Hana[]; // 可选属性，叶子节点可能没有子节点
}

然后修正服务的返回类型（从Hana[]改成Hana）：

getHanaStructure(): Observable<Hana> {
  const hanaStruct = this.http.get<Hana>(this.apiUrl);
  this.messageService.add('HanaService: fetched struct');
  return hanaStruct;
}

最后调整组件的变量和方法，不需要再用_.toArray()转换（因为返回的是单个对象，不是数组）：

hanaStructure$: Observable<Hana>; // 单个根节点，不是数组

getHanaStructure(): void {
  this.hanaStructure$ = this.hanaService.getHanaStructure();
}

现在你就能正常访问hana.Id、hana.Attributes.ReadOnly这些属性了。

问题2：展示嵌套的子节点 #

树形结构需要递归渲染，Angular中可以通过ng-template结合ngTemplateOutlet实现递归调用，不需要额外写组件。

修正HTML模板 #

替换你的模板为下面的代码，它会自动遍历所有层级的子节点：

<ng-container *ngIf="hanaStructure$ | async as hanaStructure else noData">
  <ul>
    <!-- 定义递归模板：接收一个node参数 -->
    <ng-template #nodeTemplate let-node>
      <li>
        {{ node.Id }} (ReadOnly: {{ node.Attributes.ReadOnly }})
        <!-- 如果当前节点有子节点，递归渲染 -->
        <ul *ngIf="node.Children && node.Children.length > 0">
          <ng-container *ngFor="let child of node.Children">
            <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: child }"></ng-container>
          </ng-container>
        </ul>
      </li>
    </ng-template>
    <!-- 渲染根节点 -->
    <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: hanaStructure }"></ng-container>
  </ul>
</ng-container>
<ng-template #noData>No Data Available</ng-template>

模板说明 #

• #nodeTemplate定义了可复用的节点模板，let-node表示接收传入的节点数据
• *ngTemplateOutlet="nodeTemplate; context: { $implicit: child }"会把每个子节点传入模板，实现递归渲染
• 加了*ngIf="node.Children && node.Children.length > 0"判断，避免叶子节点渲染空列表

这样不管你的树形结构嵌套多少层，所有节点都会被正确展示出来。

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