由于該組件當前僅被應用于klass模塊中，所以我們來到klass模塊所在文件夾使用`ng g c teacherSelect`建立選擇教師組件: ``` panjiedeMac-Pro:klass panjie$ ng g c teacherSelect CREATE src/app/klass/teacher-select/teacher-select.component.sass (0 bytes) CREATE src/app/klass/teacher-select/teacher-select.component.html (29 bytes) CREATE src/app/klass/teacher-select/teacher-select.component.spec.ts (678 bytes) CREATE src/app/klass/teacher-select/teacher-select.component.ts (301 bytes) UPDATE src/app/klass/klass.module.ts (924 bytes) ``` ## 啟動單元測試 將單元測試中的`it`變更為`fit`后，使用`ng test`啟動單元測試來觀察效果： klass/teacher-select/teacher-select.component.spec.ts  ## V層初始化 ``` <select id="teacherSelect" [formControl]="teacherSelect"> ? <option *ngFor="let teacher of teachers"? [ngValue]="teacher"?> {{teacher.name}}? </option> </select> ``` * ? 使用formControl綁定C層表單控件 * ? 循環輸出teachers中的值 * ? 每個option賦值為一個`teacher`對象 * ? 顯示教師的名稱 ## C層初始化 ``` import {Component, OnInit} from '@angular/core'; import {Teacher} from '../../norm/entity/Teacher'; import {FormControl} from '@angular/forms'; @Component({ selector: 'app-teacher-select', templateUrl: './teacher-select.component.html', styleUrls: ['./teacher-select.component.sass'] }) export class TeacherSelectComponent implements OnInit { /*所有教師*/ teachers: Array<Teacher?>; teacherSelect: FormControl; constructor() { } /** * 獲取所有的教師，并傳給V層 */ ngOnInit() { this.teacherSelect = new FormControl(); } } ``` * ? 數組中每一項的類型均為Teacher ## 修正測試 我們按單元測試的提供修正一些引用方面的錯誤： ``` import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {TeacherSelectComponent} from './teacher-select.component'; import {BrowserModule} from '@angular/platform-browser'; import {CommonModule} from '@angular/common'; import {ReactiveFormsModule} from '@angular/forms'; describe('TeacherSelectComponent', () => { let component: TeacherSelectComponent; let fixture: ComponentFixture<TeacherSelectComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [TeacherSelectComponent], imports: [ BrowserModule, ReactiveFormsModule ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TeacherSelectComponent); component = fixture.componentInstance; fixture.detectChanges(); }); fit('獲取教師列表后選擇教師', () => { expect(component).toBeTruthy(); }); }); ``` # 敏捷開發 敏捷開發理論中，我們需要將一個大的目標分解成多個小的階段性目標。且同時每個階段性目標都是可以衡量的。在此，我們將此組件的目標定制為： * [ ] 完成靜態的數據列表 * [ ] 完成動態的數據列表 * [ ] 完成選擇教師的輸出 * [ ] 完成根據輸出選中教師 ## 靜態數據列表 靜態數據列表比較簡單，我們只需要在C層中初始化幾個教師值即可： ``` /** * 獲取所有的教師，并傳給V層 */ ngOnInit() { this.teacherSelect = new FormControl(); this.teachers = new Array(new Teacher(1, 'panjie', '潘杰'), new Teacher(2, 'zhangxishuo', '張喜碩')); } ```  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.1) | - | | 在響應式表單中使用 select 控件 | [https://www.angular.cn/api/forms/SelectControlValueAccessor#using-select-controls-in-a-reactive-form](https://www.angular.cn/api/forms/SelectControlValueAccessor#using-select-controls-in-a-reactive-form) | 5 |