angular中`组件component`占据了非常重要的位置，我们看到的每个界面都可以看作是一个组件，此处组件还可以进行嵌套，大的父组件中可以有多个小的子组件，而且组件间的结合非常的灵活，父子组件还可以进行障碍的通讯。 上一章我们已经接触了第一个组件，名称为`app`。和我们猜测的一致，angular中的每个标准的组件都有四个文件组成： ```bash ├── app.component.css ❶ ├── app.component.html ❷ ├── app.component.spec.ts ❸ ├── app.component.ts ❹ ``` * ❶ 样式文件，该文件中的样式仅对当前组件生效（可选） * ❷ 组件的V层（可选） * ❸ 测试文件（可选） * ❹ 组件的C层，定义了组件使用的V层及CSS文件（😀必选）。 ## 原型 进入项目文件夹后使用`ng t`启动项目，打开V层文件`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层原型数据 在C层初始化一个教师数组`teachers`: ```typescript export class AppComponent { title = 'first-app'; // 定义教师数组 teachers = [{ id: 1, name: '张三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男' }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: '女', }]; } ``` <hr> 好的编码习惯有助于我们减少在编程过程中发生的小错误，特别是语法方面。在这简单给下上述代码在编写过程中的正确步骤： ```typescript // 定义教师数组 teachers = []; // ➊ teachers = [{}, {}]; // ➋ teachers = [{ },{ }]; // ➌ teachers = [{ id: 1, name: '张三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: '男' }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: '女', }]; // ➍ ``` * ➊ 初始化初数组 * ➋ 使用{},{}初始化数组，表示这个数组中有2个元素，每个元素的值均是{} * ➌ 加入回车对数据进行格式化（仅仅改变格式），格式化后与➋完全相同，只是格式变了。 * ➍ 为每一个{}加入属性。 总结：每次写的代码都要保证是完整的。有`[`就要有`]`，有`{`就要有`}`。 ## V层中查看数据 angular能够直接在V层中使用C层中定义的类型为`public`的属性或方法。比如我们可以在V层中直接使用`teachers`。为了便于开发，我们在V层正式使用某个数据前，往往会加入查看数据的测试代码，我们习惯于把这个过程叫做`debug`，该习惯将有效提升整体的开发效率，做到对数据**心中有数**，是个非常好的习惯。 我们在V层的起始位置插入以下代码来打印`teachers`: ```html <pre> ➊ {{ teachers |❹ json➌ }}➋ </pre> <table> ``` * ➊ 用于显示代码的标签 * ➋ 在V层中，使用`{{ 变量名 }}`来输入变量的值 * ➌ 将变量转换为JSON字符串 * ❹ 当我们需要把一种数据转换为另一种数据时，需要在原数据与转换的方法中间使用`|`分隔，该符号被称为`管道符`，对应英文为`pipe` ## 测试 保存完文件后，浏览器将自动刷新。但事与愿违，我们并**没有**看到打印的`teachers`数据。  在此我可以肯定地告诉大家，我们的使用方法并没有任何问题。此时我们可以运行`ng serve`或`ng s`来启动项目，并打开[http://localhost:4200/](http://localhost:4200/)来查看数据。  那么同样的代码为什么`ng t`就不显示呢？问题到底出在哪呢？请继续学习下一小节。 # 本节作业 尝试将C层`title`属性的值输出到V层中。 # 资源列表 | 名称 | 地址 | |---- | ---- | | 快速上手 | [https://www.angular.cn/start](https://www.angular.cn/start) | | 组件概览 | [https://www.angular.cn/guide/component-overview](https://www.angular.cn/guide/component-overview) | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.1.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.1.1.zip)