人們更愿意交流實實在在的東西，也不是抽像的概念。就像你學習了1年的C語言，也沒有花1個月用C語言做個項目掌握知識更牢固一樣。我們開發項目也是如此。在動手完成功能以前，首先要有原型的支持來告訴大家我們這個項目會做成什么樣。這比寫個10頁的需求文檔來的會更直接、更明了些。 # V層原型 使用IDEA打開前臺項目文件夾(**指上節中下載解壓的文件夾，不是以前的HelloWorld了喲**)，并找到`src/app/app.component.html`，刪除該文件中所有的代碼后，添加新代碼如下： app.component.html ```html <table> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>操作</th> </tr> <tr> <td>1</td> <td>張三</td> <td>zhangsan</td> <td>zhangsan@yunzhiclub.com</td> <td>男</td> <td>刪除</td> </tr> <tr> <td>2</td> <td>李四</td> <td>lisi</td> <td>lisi@yunzhiclub.com</td> <td>女</td> <td>刪除</td> </tr> </table> ``` 使用`ctrl-s`保存后，瀏覽器將自動刷新頁面：  至此，原型的功能便完成了。原型的數據最終是由C層來傳遞的，下面我們將原型中數據的字義遷移到C層。 # C層原型數據 app.component.ts ``` import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.sass'] }) export class AppComponent { title = 'web-app'; // 定義教師數組 teachers = new Array( { id: 1, name: '張三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男' }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: '女', }); } ``` 簡單解釋下這個數組定義的過程： ``` teachers = new Array(); ? teachers = new Array({},{}); ? teachers = new Array({ }, { }); ? teachers = new Array({ id: 1, name: '張三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男', }, { }); ? teachers = new Array( { id: 1, name: '張三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男', }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: '女', }); ? ``` ? 初始化初數組 ? 使用`{},{}`初始化數組，表示這個數組中有2個元素，每個元素的值均是`{}` ? 加入回車對數據進行格式化（僅僅改變格式），格式化后與?完全相同，只是格式變了。 ? 為每一個`{}`加入屬性。 ? 為第二個`{}`加入屬性。 # V層中查看數據 為了便于開發，我們在V層正式的使用某個數據前，往往會加入查看數據的測試代碼： app.component.html ```html <pre> ? {{ ? teachers | json ? }} </pre> <table> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>操作</th> </tr> <tr> <td>1</td> <td>張三</td> <td>zhangsan</td> <td>zhangsan@yunzhiclub.com</td> <td>男</td> <td>刪除</td> </tr> <tr> <td>2</td> <td>李四</td> <td>lisi</td> <td>lisi@yunzhiclub.com</td> <td>女</td> <td>刪除</td> </tr> </table> ``` ? 將`JSON對象`轉換為`JSON字符串` ? 在V層中輸出`JSON字符串` ? html標簽，常用于顯示代碼 預覽：  ## JSON 我們剛剛在C層中定義了1個`JSON對象`，該對象的類型是數組`Array`，該數組中又包括兩個普通的`JSON對象`。 ```js teachers = new Array( { id: 1, name: '張三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男', }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: '女', }); ``` 然后在V層使用`| json`進行展示時，將這個`JSON對象`轉換成了`JSON字符串`。 ``` ~~~ [ { "id": 1, "name": "張三", "username": "zhangsan", "email": "zhangsan@yunzhiclub.com", "sex": "男" }, { "id": 2, "name": "李四", "username": "lisi", "email": "lisi@yunzhiclub.com", "sex": "女" } ] ~~~ ``` ① 在代碼中定義的是`JSON對象`，類型為`Array（Object)`; 在V層中用于顯示的是`JSON字符串`，類型為`string`。 ② `JSON對象`可以轉換為`JSON字符串`，進而在V層中輸出；`JSON字符串`也可以轉換為`JSON對象`（轉換過程中可能會報錯，比如：1.5.2小節節）。 ③ `JSON字符串`是長的像 `JSON對象`對象的字符串。 ④ `JSON字符串` = `var a = '{}'; `JSON對象` = `var a = {};` # ngFor循環輸出數據 app.component.html部分代碼 ```html <table> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>操作</th> </tr> <tr *ngFor="let _teacher of teachers" > ? <td><pre>{{_teacher | json}}</pre></td> ? <td>張三</td> <td>zhangsan</td> <td>zhangsan@yunzhiclub.com</td> <td>男</td> <td>刪除</td> </tr> </table> ``` ? 對`teachers`變量進行循環，每次循環的變量為`_teacher` ? 直接打印變量的內容，便于調試  完善代碼： ```html <tr *ngFor="let _teacher of teachers" > <td>{{_teacher.id}}</td> <td>{{_teacher.name}}</td> <td>{{_teacher.username}}</td> <td>{{_teacher.email}}</td> <td>{{_teacher.sex}}</td> <td>刪除</td> </tr> ``` 效果：  # 本節小測 請思索：我們在使用`ngFor`時為什么將循環變量定義為`_teacher`，而不是`teacher`呢? 如果定義為`teacher`可能會有什么問題，為什么? # 參考文檔 | 名稱 | 鏈接 | |---- | ---- | | 表達式與插值 Interpolation and Template Expressions | https://www.angular.cn/guide/template-syntax#interpolation-and-template-expressions | | ngforof ngfor | https://www.angular.cn/guide/template-syntax#ngforof| | 源碼 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.2.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.2.1) |