# 原型 有了前面初始化原型的经验，相信大家已经可以自主完成个人中心的原型组件了。 ## 初始化 使用angular-cli命令初始化组件： ```bash panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % ng g c personalCenter CREATE src/app/personal-center/personal-center.component.css (0 bytes) CREATE src/app/personal-center/personal-center.component.html (30 bytes) CREATE src/app/personal-center/personal-center.component.spec.ts (683 bytes) CREATE src/app/personal-center/personal-center.component.ts (310 bytes) UPDATE src/app/app.module.ts (998 bytes) ``` ## C层 在C层中定义属性me用于显示当前登录用户信息： ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts @@ -1,4 +1,5 @@ import {Component, OnInit} from '@angular/core'; +import {Teacher} from '../entity/teacher'; @Component({ selector: 'app-personal-center', @@ -6,6 +7,8 @@ import {Component, OnInit} from '@angular/core'; styleUrls: ['./personal-center.component.css'] }) export class PersonalCenterComponent implements OnInit { + me = {} as Teacher; 👈 + constructor() { } ``` 使用`{}`来定义一个空对象，该对象上没有任何属性；使用`as`来将其指定义`Teacher`类型。 ## V层 在V层中直接显示当前用户的各个信息： ```html +++ b/first-app/src/app/personal-center/personal-center.component.html @@ -1 +1,34 @@ -<p>personal-center works!</p> +<div class="container-md"> + <div class="row"> + <div class="col-4 text-right"> + 姓名： + </div> + <div class="col-8"> + {{me.name}} + </div> + </div> + <div class="row"> + <div class="col-4 text-right"> + 用户名： + </div> + <div class="col-8"> + {{me.username}} + </div> + </div> + <div class="row"> + <div class="col-4 text-right"> + 邮箱： + </div> + <div class="col-8"> + {{me.email}} + </div> + </div> + <div class="row"> + <div class="col-4 text-right"> + 性别： + </div> + <div class="col-8"> + {{me.sex}} + </div> + </div> +</div> ``` ## 测试 ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.spec.ts @@ -21,5 +21,6 @@ describe('PersonalCenterComponent', () => { fit('should create', () => { expect(component).toBeTruthy(); + fixture.autoDetectChanges(); }); }); ```  接着加入一些测试数据 ，让当前界面看起来更饱满： ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts @@ -13,6 +13,14 @@ export class PersonalCenterComponent implements OnInit { } ngOnInit(): void { + this.me = new Teacher( + 1, + 'zhangsan@yunzhi.club', + '张三', + 'password', + true, + 'zhangsan' + ); } } ```  再简单美化一下： ```css +++ b/first-app/src/app/personal-center/personal-center.component.css @@ -0,0 +1,3 @@ +.row { + margin-top: 0.5em; +} ```  ## 本节作业 在V层的性别应该是男或女，请自行完成该功能。 | 名称 | 地址 | | | ---------- | ------------------------------------------------------------ | ---- | | 对象初始化 | [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer) | | | As | [https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions) | | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step4.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step4.1.zip) | |