Angular提供了一个名为`*ngFor`的指令来循环显示数据，比如我们可以如下循环显示`teachers`中的数据。 ```html <table> <tr> <th>序号</th> <th>姓名</th> <th>用户名</th> <th>邮箱</th> <th>性别</th> <th>操作</th> </tr> <tr *ngFor="let teacher of teachers"> 😀 <td>序号</td> <td>{{ teacher.name }}</td> <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td>{{ teacher.sex }}</td> <td>删除</td> </tr> </table> ``` * 😀 使用`let var of array`关键字来循环某个数组 * 虽然使用`{{teacher.name}}`angular同样可以正确的进行输出，但我们仍然建议使用`{{ teacher.name }}`  让我们在浏览器中点击右键查看一下生成的html源代码： ```html <table _ngcontent-a-c16❶=""> <tr _ngcontent-a-c16❶=""> <th _ngcontent-a-c16❶="">序号</th> <th _ngcontent-a-c16="">姓名</th> <th _ngcontent-a-c16="">用户名</th> <th _ngcontent-a-c16="">邮箱</th> <th _ngcontent-a-c16="">性别</th> <th _ngcontent-a-c16="">操作</th> </tr> <tr _ngcontent-a-c16❶=""> ❷ ❸ <td _ngcontent-a-c16❶="">序号</td> <td _ngcontent-a-c16="">张三</td> <td _ngcontent-a-c16="">zhangsan</td> <td _ngcontent-a-c16="">zhangsan@yunzhiclub.com</td> <td _ngcontent-a-c16="">男</td> <td _ngcontent-a-c16="">删除</td> </tr> <tr _ngcontent-a-c16❶=""> ❸ <td _ngcontent-a-c16❶="">序号</td> <td _ngcontent-a-c16="">李四</td> <td _ngcontent-a-c16="">lisi</td> <td _ngcontent-a-c16="">lisi@yunzhiclub.com</td> <td _ngcontent-a-c16="">女</td> <td _ngcontent-a-c16="">删除</td> </tr> <!--bindings={ ❶ "ng-reflect-ng-for-of": "[object Object],[object Object" }--> </table> ``` * ❶ 属于angular自动生成的部分，暂时我们不用管它 * ❷ `*ngFor`在循环过程中，包含其宿主元素`tr` * ❸ 按`teachers`的大小，循环了两次 ## 生成序号 `*ngFor`在每次循环时，都可以获取到当前正在循环数组中当前条目的索引。 ```html <tr *ngFor="let teacher of teachers; index as i❶"> <td>{{ i + 1❷ }}</td> ```  * ❶ `index as var`来指定循环次数在模板V层中的变量 * ❷ 由于索引是0基的，所以要在其基础上做加1处理 此处，还可以使用`let var = index`的方法来替换`index as var`，两种写法的作用完全一致。你完全可以选择自己习惯一款。 OK，so easy, 就到这里。 >[info] 我们把这种循环查看数组中的元素的过程又称为：迭代 # 本节作业 `*ngFor`除了可以获取到迭代对象当前条目的索引用，还可以获取到可迭代对象的长度等其它信息，请尝试参考[ngForOf局部变量](https://www.angular.cn/api/common/NgForOf#%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F)来输出它们。 # 资源列表 | 名称 | 地址 | |---- | ---- | | 插值与模板表达式 | [https://www.angular.cn/guide/interpolation](https://www.angular.cn/guide/interpolation) | | NgFor | [https://www.angular.cn/guide/built-in-directives#ngfor](https://www.angular.cn/guide/built-in-directives#ngfor) | | ngForOf 局部变量 | [https://www.angular.cn/api/common/NgForOf#%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F](https://www.angular.cn/api/common/NgForOf#%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F) | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.1.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.1.3.zip)