由于该组件当前仅被应用于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 ![](https://img.kancloud.cn/8d/d0/8dd0c231bdcd8c15f124999f061b0305_288x79.png) ## 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://img.kancloud.cn/da/ec/daec6572664a0977e87b192af75a1ba1_190x61.gif) # 参考文档 | 名称 | 链接 | 预计学习时长(分) | | --- | --- | --- | | 源码地址 | [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 |