久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

學(xué)生的更新與其它的組件更新大同小異： ## 更新 為了能夠更加方法的組織測(cè)試，如果某個(gè)方法是由V層觸發(fā)的。則我們更愿意將該方法中使用到的組件屬性通過參數(shù)傳遞進(jìn)來。這樣做使該方法更加獨(dú)立，同時(shí)在方法層面上也符合高內(nèi)聚低耦合的軟件工程思想。 在更新某個(gè)學(xué)生時(shí)，要使用到要更新的學(xué)生ID以及FormGroup，我們先將這兩項(xiàng)信息加到更新的方法上： ```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"> ``` 對(duì)應(yīng)修改組件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 { } ``` ### 完成功能 完成功能往往是最簡(jiǎn)單的事情： ```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`將數(shù)據(jù)類型`看做`我們認(rèn)為的類型，所以為了避免這種不安全操作可能帶來的影響，我們接收使用②的方法來保證①的`as`是符合預(yù)期的。 一旦`formGroup.value`的數(shù)據(jù)格式并不與我們`as`的相同，則會(huì)在②處的代碼上發(fā)生異常。 #### 單元測(cè)試 ```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', () => { + // 發(fā)送數(shù)據(jù)，使用組件使用MockApi返回的數(shù)據(jù)初始化 + getTestScheduler().flush(); + fixture.autoDetectChanges(); + + // 使用組件中的formGroup來觸發(fā)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) | 本節(jié)源碼 |