# 原型 有了前面初始化原型的經驗，相信大家已經可以自主完成個人中心的原型組件了。 ## 初始化 使用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) | |