人们更愿意交流实实在在的东西，也不是抽像的概念。就像你学习了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) |