Angular 8+ 如何使用ngFor遍历对象数组内嵌的对象数组？

核心问题根因 #

你的类型定义和实际接口返回结构不匹配：接口返回的documents是数组，但你在DocumentHeadModel中将该字段定义为单个DocumentsModel对象，导致Angular认为documents不可迭代，触发遍历报错。

第一步：修正模型定义 #

将DocumentHeadModel的documents字段调整为数组类型，若你需要用到category.name属性，也需要同步补充到DocumentsModel的定义中：

export class DocumentHeadModel {
 id: string;
 // 修正为DocumentsModel数组类型
 documents: DocumentsModel[];
}

export class DocumentsModel {
 id: string;
 // 补充业务需要用到的字段定义
 category?: {
  name: string
 }
}

第二步：修正模板遍历代码 #

去掉错误的索引引用，直接遍历documents数组即可：

<li *ngFor="let docHead of DocumentHead;">
  <div *ngFor="let docs of docHead.documents">
    <h3> {{docs.category?.name}} </h3>
    <p>文档ID：{{docs.id}}</p>
  </div>
</li>

原有报错说明 #

• 直接写let docs of docHead.documents报错：因为旧类型定义将documents标记为单个对象，不符合ngFor对可迭代对象的要求
• 使用keyvalue管道报错：该管道用于遍历普通对象的键值对，不适用数组场景，且类型不匹配
• 之前docHead.documents[0].id可以正常运行：是因为运行时接口实际返回数组，但编译阶段由于类型定义错误仍会存在潜在报错风险

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