本節我們共同來完成學生列表組件。 ## 新建組件 我們來到`src/app/stduent`文件中，執行`ng g c student --flat`來創建學生列表組件： ```bash panjie@panjies-iMac student % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/student panjie@panjies-iMac student % ng g c student --flat CREATE src/app/student/student.component.css (0 bytes) CREATE src/app/student/student.component.html (22 bytes) CREATE src/app/student/student.component.spec.ts (633 bytes) CREATE src/app/student/student.component.ts (279 bytes) UPDATE src/app/student/student.module.ts (401 bytes) ``` 教程中我們使用了太多遍的`ng g c xx`命令來創建組件，在創建過程中也使用過`-m`參數來指定組件模塊，剛剛又使用了`--flat`參數（否則將創建student子文件夾）在當前文件夾中創建了組件。那么問題來了，我又是怎么知道這些參數的呢？答案很簡單：幫助文檔。 基本上每個命令都會有幫助文檔，在`shell`中往往可以通過` --help`參數來獲取到它們。如果這些命令必須加一些參數才能正常工作，則直接輸入這個命令也可能得到一些幫助信息；如果這些命令是操作系統原生的，在`xunix`系統中還可以通過`man 命令名`來獲取幫助文檔。 `ng`是Angular cli提供的命令，可以使用`ng`來獲取到幫助文檔： ```bash panjie@panjies-iMac app % ng Available Commands: add Adds support for an external library to your project. analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering. build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. deploy Invokes the deploy builder for a specified project or for the default project in the workspace. config Retrieves or sets Angular configuration values in the angular.json file for the workspace. doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword. e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor. extract-i18n (i18n-extract, xi18n) Extracts i18n messages from source code. generate (g) Generates and/or modifies files based on a schematic. help Lists available commands and their short descriptions. lint (l) Runs linting tools on Angular app code in a given project folder. new (n) Creates a new workspace and an initial Angular application. run Runs an Architect target with an optional custom builder configuration defined in your project. serve (s) Builds and serves your app, rebuilding on file changes. test (t) Runs unit tests in a project. update Updates your application and its dependencies. See https://update.angular.io/ version (v) Outputs Angular CLI version. For more detailed help run "ng [command name] --help" ``` 在學習過程中出現英文的提示新手往往就是一笑而過，完全不管開發者具體說了些什么。這是每個非英語為母語的程序員都必須改掉的壞毛病。試想下如果我們做為開發者，同樣希望把重要的信息以文字的開工傳遞給使用者，如果我們開發的項目想被全球的程序員使用，則這個語言必然是英文的。以筆者多年的教學、開發經驗來看，有絕大多數的問題都可以在提示信息中輕構的找到問題的根本原因，從而幫助我們快速的找到答案。 再比如我們還可以通過輸入`ng g c --help`來看到生成組件時支持的參數，而教程中使用過的`-m`以及`--plat`參數則全部來源于該幫助文檔。 ## 初始化 組件的初始化需要C、V的配合，在實際的開發過程中往往在先V后C，邊V邊C。 當在V層中需要什么屬性性，便隨時在C層中添加什么屬性。 ```html <div class="row"> <div class="col-12 text-right"> <a class="btn btn-primary mr-2" routerLink="./add"><i class="fas fa-plus"></i>新增</a> </div> </div> <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> <th>序號</th> <th>姓名</th> <th>學號</th> <th>手機號</th> <th>班級</th> <th>班主任</th> <th>操作</th> </tr> </thead> <tbody> <tr *ngFor="let student of pageData.content; index as index"> <td>{{index + 1}}</td> <td>{{student.name}}</td> <td>{{student.number}}</td> <td>{{student.phone}}</td> <td>{{student.clazz.name}}</td> <td>{{student.clazz.teacher.name}}</td> <td> <a class="btn btn-outline-primary btn-sm" routerLink="edit/{{student.id}}"> <i class="fas fa-pen"></i>編輯 </a> <span class="btn btn-sm btn-outline-danger" (click)="onDelete(index, student.id)"> <i class="far fa-trash-alt"></i>刪除 </span> </td> </tr> </tbody> </table> ``` 對應C層文件： ```typescript import {Component, OnInit} from '@angular/core'; import {Page} from '../entity/page'; import {Student} from '../entity/student'; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent implements OnInit { pageData = {} as Page<Student>; constructor() { } ngOnInit(): void { } onDelete(index: number, id: number): void { } } ``` 在V層中使用到了路由模塊的相關功能，所以在單元測試中加入路由測試模塊： ```typescript import {ComponentFixture, TestBed} from '@angular/core/testing'; import {StudentComponent} from './student.component'; import {RouterTestingModule} from '@angular/router/testing'; describe('StudentComponent', () => { let component: StudentComponent; let fixture: ComponentFixture<StudentComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [StudentComponent], imports: [ RouterTestingModule ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(StudentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); fit('should create', () => { expect(component).toBeTruthy(); }); }); ``` 最終效果如下：  | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step7.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.4.zip) |