如何使用ngFor遍历对象数组中的对象数组？(角度8 +)

在Angular中，ngFor指令通常用于遍历数组中的元素。如果你有一个对象数组，其中每个对象又包含另一个数组，你可以使用嵌套的ngFor来遍历这些数据。

假设你有以下的数据结构：

items = [
  {
    name: 'Category 1',
    items: [
      { id: 1, title: 'Item 1.1' },
      { id: 2, title: 'Item 1.2' }
    ]
  },
  {
    name: 'Category 2',
    items: [
      { id: 3, title: 'Item 2.1' },
      { id: 4, title: 'Item 2.2' }
    ]
  }
];

你可以在组件模板中使用嵌套的ngFor来遍历这个结构：

<div *ngFor="let category of items">
  <h3>{{ category.name }}</h3>
  <ul>
    <li *ngFor="let item of category.items">{{ item.title }}</li>
  </ul>
</div>

在这个例子中，外层的ngFor循环遍历items数组中的每个对象（即每个类别），而内层的ngFor循环遍历每个类别中的items数组。

优势

• 清晰的数据展示：嵌套的ngFor使得数据的层次结构在视图中得以清晰展现。
• 易于维护：当数据结构变化时，只需要调整模板中的循环逻辑，而不需要修改组件的业务逻辑。

类型

• 对象数组：数组中的每个元素都是一个对象。
• 嵌套数组：对象中包含另一个数组作为属性。

应用场景

• 分类列表：如上面的例子所示，用于展示不同类别下的项目列表。
• 多层次菜单：在导航菜单中，可以使用嵌套的ngFor来创建多级菜单结构。
• 复杂的数据报告：当需要展示具有多层次结构的数据时，如组织结构图、财务报表等。

遇到的问题及解决方法

如果你在使用嵌套的ngFor时遇到问题，比如数据没有正确显示，可能是以下几个原因：

1. 数据源为空或未定义：确保你的数据源已经正确初始化并且在组件中被赋值。
2. 属性名拼写错误：检查模板中的属性名是否与组件类中的属性名一致。
3. 异步数据加载：如果你的数据是通过HTTP请求异步获取的，确保在数据到达之前模板不会尝试访问未定义的属性。

解决方法：

• 使用*ngIf来确保只有在数据存在时才渲染模板部分。
• 在组件类中使用可选链操作符（?.）来安全地访问可能为undefined的属性。

例如：

items?: { name: string, items: { id: number, title: string }[] }[];

<div *ngFor="let category of items">
  <h3>{{ category.name }}</h3>
  <ul *ngIf="category.items">
    <li *ngFor="let item of category.items">{{ item.title }}</li>
  </ul>
</div>

这样可以在数据还未加载完成时避免错误。