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)