學生的更新與其它的組件更新大同小異： ## 更新 為了能夠更加方法的組織測試，如果某個方法是由V層觸發的。則我們更愿意將該方法中使用到的組件屬性通過參數傳遞進來。這樣做使該方法更加獨立，同時在方法層面上也符合高內聚低耦合的軟件工程思想。 在更新某個學生時，要使用到要更新的學生ID以及FormGroup，我們先將這兩項信息加到更新的方法上： ```html +++ b/first-app/src/app/student/edit/edit.component.html @@ -1,4 +1,4 @@ -<form class="container-sm" (ngSubmit)="onSubmit()" [formGroup]="formGroup"> +<form class="container-sm" (ngSubmit)="onSubmit(id, formGroup)" [formGroup]="formGroup"> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">名稱</label> <div class="col-sm-10"> ``` 對應修改組件C層： ```typescript +++ b/first-app/src/app/student/edit/edit.component.ts @@ -34,7 +34,7 @@ export class EditComponent implements OnInit { this.loadData(this.id); } - onSubmit(): void { + onSubmit(id: number, formGroup: FormGroup): void { } ``` ### 完成功能 完成功能往往是最簡單的事情： ```typescript +++ b/first-app/src/app/student/edit/edit.component.ts @@ -34,8 +34,23 @@ export class EditComponent implements OnInit { this.loadData(this.id); } + /** + * 更新 + * @param id id + * @param formGroup 表單組 + */ onSubmit(id: number, formGroup: FormGroup): void { - + const formValue = formGroup.value as { name: string, phone: string, email: string, clazzId: number }; ① + Assert.isString(formValue.name, formValue.phone, formValue.email, '類型必須為字符串'); ② + Assert.isNumber(formValue.clazzId, '類型必須為number'); ② + this.studentService.update(id, { + name: formValue.name, + email: formValue.email, + phone: formValue.phone, + clazz: {id: formValue.clazzId} + }).subscribe(() => { + console.log('更新成功'); + }); } /** ``` 由于在①上使用了`as`將數據類型`看做`我們認為的類型，所以為了避免這種不安全操作可能帶來的影響，我們接收使用②的方法來保證①的`as`是符合預期的。 一旦`formGroup.value`的數據格式并不與我們`as`的相同，則會在②處的代碼上發生異常。 #### 單元測試 ```typescript +++ b/first-app/src/app/student/edit/edit.component.spec.ts @@ -7,6 +7,7 @@ import {RouterTestingModule} from '@angular/router/testing'; import {ActivatedRoute, RouterModule} from '@angular/router'; import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module'; import {ReactiveFormsModule} from '@angular/forms'; +import {randomNumber} from '@yunzhi/ng-mock-api'; describe('EditComponent', () => { let component: EditComponent; @@ -30,10 +31,20 @@ describe('EditComponent', () => { fixture.detectChanges(); }); - fit('should create', () => { + it('should create', () => { expect(component).toBeTruthy(); }); + fit('onSubmit', () => { + // 發送數據，使用組件使用MockApi返回的數據初始化 + getTestScheduler().flush(); + fixture.autoDetectChanges(); + + // 使用組件中的formGroup來觸發onSubmit()方法 + component.onSubmit(component.id as number, component.formGroup); + getTestScheduler().flush(); + }); + ```  ## 資源鏈接 | 鏈接 | 名稱 | | ------------------------------------------------------------ | -------- | | [https://github.com/mengyunzhi/angular11-guild/archive/step7.7.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.7.3.zip) | 本節源碼 |