Angular组件模板如何绑定API返回的多层嵌套数据字段

你无法直接取到深层字段的核心原因是：接口返回结构里的categories、categories下的products都是数组类型，不是单层对象，不能直接用连续点语法访问属性，必须先遍历数组层级、或者指定数组下标后，才能取到对应对象里的目标字段。
另外你贴的结构里字段名包裹的**是你自己加的高亮标记，不是接口实际返回的键名，实际取值时用不带星号的键名即可。如果极端情况下接口返回的键名真的带**，用方括号语法取值即可。

1. 组件类中初始化变量避免空报错 #

接口是异步返回的，模板初次渲染时变量还没被赋值，提前给初始结构可以避免空指针报错：

// 组件ts文件中
myVal: any = {
  categories: [] // 初始化空数组，匹配接口结构
};

// 你的API调用逻辑，拿到返回后赋值
this.apiService.getProductData().subscribe(res => {
  this.myVal = res;
});

2. 模板中遍历数组层级后绑定字段 #

如果需要展示所有分类下的所有商品，用两层*ngFor遍历数组即可，配合Angular安全导航操作符?做容错：

<!-- 顶层数据加载完成后再渲染内容块 -->
<div *ngIf="myVal">
  <p>顶层资源名称：{{ myVal.name }}</p>

  <!-- 第一层遍历：遍历所有分类 -->
  <section *ngFor="let category of myVal.categories" class="category-item">
    <h3>分类名：{{ category.name }}</h3>

    <!-- 第二层遍历：遍历当前分类下的所有商品 -->
    <div *ngFor="let product of category.products" class="product-item">
      <!-- 商品直接属性 -->
      <img [src]="product.thumbnail" alt="商品缩略图">
      <p>商品名：{{ product.display_name }}</p>

      <!-- instructions对象下的嵌套属性 -->
      <p>价格：{{ product.instructions?.price }}</p>
      <p>规格：{{ product.instructions?.format }}</p>
    </div>
  </section>
</div>

3. 固定取指定位置元素的写法 #

如果你不需要展示所有商品，只需要取固定位置（比如第一个分类下的第一个商品）的字段，可以直接通过数组下标访问，不需要遍历：

<ng-container *ngIf="myVal?.categories?.[0]?.products?.[0]">
  <img [src]="myVal.categories[0].products[0].thumbnail" alt="">
  <p>商品名：{{ myVal.categories[0].products[0].display_name }}</p>
  <p>价格：{{ myVal.categories[0].products[0].instructions.price }}</p>
  <p>规格：{{ myVal.categories[0].products[0].instructions.format }}</p>
</ng-container>

• 不要直接写{{myVal.categories.products.xxx}}这类语法，数组类型没有直接挂在数组对象上的属性，必须指定下标或者遍历出单个元素后再取值。
• 安全导航操作符?只需要加在可能为空的路径上，异步数据场景建议全程加上，避免数据未返回时模板报错。
• 如果实际接口返回的键名真的包含**符号，点语法无法识别特殊键名，改用方括号取值即可，比如product['**thumbnail**']。

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