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)