# Angular 2 中的嵌套 *ngFor：创建可复用的组件
在Angular 2中，*ngFor是一个强大的指令，用于迭代数组并生成相应的HTML元素。当我们需要处理嵌套数据结构时，*ngFor也可以嵌套使用，为我们提供了更灵活的方式来展示数据。在这篇文章中，我们将讨论如何在Angular 2中嵌套使用*ngFor，并演示如何创建可复用的组件来处理复杂的数据结构。## 基本的*ngFor用法首先，让我们回顾一下*ngFor的基本用法。假设我们有一个简单的Angular组件，其中包含一个包含学生姓名的数组。我们可以使用*ngFor来迭代这个数组，并为每个学生创建一个列表项。typescript// student-list.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-student-list', template: ` - {{ student.name }}
typescript// school.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-school', template: ` {{ class.className }}
- {{ student.name }}
`,})export class SchoolComponent { schoolClasses = [ { className: 'Class A', students: [ { name: 'Alice' }, { name: 'Bob' }, ], }, { className: 'Class B', students: [ { name: 'Charlie' }, { name: 'David' }, ], }, ];}在这个例子中，*ngFor嵌套在另一个*ngFor内部。外部的*ngFor用于迭代`schoolClasses`数组，而内部的*ngFor则用于遍历每个班级中的学生数组。这样，我们可以按层次结构有效地显示学校的班级和学生信息。## 创建可复用的组件为了使代码更模块化和可维护，我们可以将班级的显示部分封装到一个可复用的组件中。让我们创建一个名为`class-list.component.ts`的组件。typescript// class-list.component.tsimport { Component, Input } from '@angular/core';@Component({ selector: 'app-class-list', template: ` {{ className }}
- {{ student.name }}
`,})export class ClassListComponent { @Input() className: string; @Input() students: { name: string }[];}在这个组件中，我们使用`@Input`装饰器接收来自父组件的数据，然后使用这些数据显示班级和学生信息。现在，我们可以在`school.component.ts`中使用新创建的`ClassListComponent`。typescript// school.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-school', template: ` 通过创建可复用的组件，我们可以更清晰地组织代码，并实现更高级别的组件复用。在这篇文章中，我们讨论了在Angular 2中嵌套使用*ngFor的基本用法，并演示了如何创建可复用的组件来处理复杂的数据结构。这种方法使我们能够更好地组织代码并提高代码的可维护性。希望这个例子能够帮助你更好地理解在Angular 2中如何处理嵌套的*ngFor。