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

本節(jié)來完成編輯班級(jí)中的教師列表部分，編輯教師時(shí)，應(yīng)當(dāng)自動(dòng)選中該班級(jí)對(duì)應(yīng)的教師。至于應(yīng)該選中哪個(gè)教師，則應(yīng)該按教師`id` 進(jìn)行對(duì)應(yīng)。 為此，我們需要簡單改造一下MockApi。使教師列表的返回ID在1-10之間： ```typescript +++ b/first-app/src/app/mock-api/teacher.mock.api.ts @@ -1,4 +1,5 @@ import {ApiInjector, MockApiInterface, randomNumber} from '@yunzhi/ng-mock-api'; +import {randomString} from '@yunzhi/ng-mock-api/testing'; /** * 教師模擬API @@ -9,16 +10,16 @@ export class TeacherMockApi implements MockApiInterface { // 獲取所有教師 method: 'GET', url: 'teacher', - result: [ - { - id: randomNumber(), - name: '教師姓名1' - }, - { - id: randomNumber(), - name: '教師姓名2' + result: () => { + const teachers = []; + for (let i = 1; i <= 10; i++) { + teachers.push({ + id: i, + name: randomString('教師姓名') + }); } - ] + return teachers; + } }]; } } ``` 然后獲取某個(gè)班級(jí)時(shí)對(duì)應(yīng)的教師ID為1至10之間的任意值： ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -87,7 +87,7 @@ export class ClazzMockApi implements MockApiInterface { id, name: randomString('班級(jí)名稱'), teacher: { - id: randomNumber(), + id: randomNumber(9) + 1, name: randomString('教師') } } as Clazz; ``` ## @Input() 為教師選擇組件增加一個(gè)`@Input()`，至于該`@Input()`是注解到屬性還是`set`方法上，則當(dāng)前應(yīng)該看具體的場景： 1. 如果考慮父組件對(duì)應(yīng)子組件上輸入數(shù)值的變化，則應(yīng)該注解到`set`方法上。 2. 如果不考慮父組件上的數(shù)值變化對(duì)子組件的影響，則應(yīng)該注解到屬性上。 對(duì)于當(dāng)前情景而言，父組件對(duì)子組件設(shè)置的教師id的值是通過請(qǐng)求后臺(tái)數(shù)據(jù)后獲取到的。執(zhí)行過程大體如下： 1. 父組件初始化 2. 父組件請(qǐng)求后臺(tái)班級(jí)數(shù)據(jù)，此時(shí)班級(jí)數(shù)據(jù)為空，班級(jí)對(duì)應(yīng)的教師數(shù)據(jù)當(dāng)然也為空。 3. 子組件初始化，綁定`@Input`. 4. 父組件的請(qǐng)求得到了響應(yīng)，此時(shí)獲取了班級(jí)數(shù)據(jù)，獲取到了班級(jí)對(duì)應(yīng)的教師數(shù)據(jù)，需要重新對(duì)子組件`@Input()` 進(jìn)行設(shè)置。 所以教師選擇組件更適合于將`@Input()`注解到`set`方法上： ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.ts + @Input() + set id(id: number) { + // 使用接收到的id設(shè)置teacherId + this.teacherId.setValue(id); + } + ``` ## 測試 我們?nèi)栽谄涓赴嗉?jí)編輯組件中對(duì)子組件進(jìn)行測試。為此，需要在父組件中傳入這個(gè)`id`屬性： ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.html @@ -12,7 +12,7 @@ <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <app-klass-select></app-klass-select> + <app-klass-select [id]="teacherId"></app-klass-select> <small class="text-danger"> 必須指定一個(gè)班主任 </small> ``` C層中增加`teacherId`，初始化并賦值： ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.ts @@ -14,6 +14,7 @@ export class EditComponent implements OnInit { * 班級(jí)名稱. */ nameFormControl = new FormControl('', Validators.required); + teacherId: number | undefined; constructor(private activatedRoute: ActivatedRoute, private httpClient: HttpClient) { @@ -34,6 +35,7 @@ export class EditComponent implements OnInit { .subscribe(clazz => { console.log('接收到了clazz', clazz); this.nameFormControl.patchValue(clazz.name); + this.teacherId = clazz.teacher.id; }, error => console.log(error)); } ``` 測試結(jié)果：  ## @Output() 輸入完成后，再增加一個(gè)輸出對(duì)接: ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.html @@ -12,7 +12,7 @@ <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <app-klass-select [id]="teacherId"></app-klass-select> + <app-klass-select [id]="teacherId" (beChange)="onTeacherChange($event)"></app-klass-select> <small class="text-danger"> 必須指定一個(gè)班主任 </small> ``` 對(duì)應(yīng)增加C層的方法： ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.ts @@ -39,4 +39,8 @@ export class EditComponent implements OnInit { }, error => console.log(error)); } + onTeacherChange($event: number): void { + console.log('接收到了選擇的teacherId', $event); + this.teacherId = $event; + } ``` 測試效果：  每點(diǎn)擊一個(gè)教師后C層的方法都會(huì)被觸發(fā)一次，有意思的是組件初始化時(shí)，我們并沒有點(diǎn)擊教師列表，但父組件的`onTeacherChange`方法也被調(diào)用了一次。 這是由于在初始化時(shí)教師選擇組件中的執(zhí)行順序如下： 1. 班級(jí)編輯組件初始化，teacherId為undefined，異步請(qǐng)求數(shù)據(jù)開始。 2. 教師選擇組件初始化，執(zhí)行`set id(undefined)`方法，調(diào)用`teacherId`的`setValue()`方法。 3. 執(zhí)行教師選擇組件的`ngOnInit()`方法，在該方法中對(duì)`teacherId`的數(shù)值變更進(jìn)行了訂閱，此后`teacherId`再有新值時(shí)，將得到一個(gè)通知。得到通知后將向父組件彈出得到的`teacherId`。 4. 父組件的異步請(qǐng)求數(shù)據(jù)返回，再次調(diào)用教師選擇組件的`set id(xx)`方法，調(diào)用`teacherId`的`setValue()`方法。此時(shí)在3中的訂閱將得到一個(gè)通知，近而向父組件彈出得到的teacherId。 5. 父組件接收到`teacherId`后，打印在控制臺(tái)，組件初始化完畢。 上述流程導(dǎo)致了在初始化父組件將某個(gè)`teacherId`傳給子組件后，子組件又將其傳回了父組件。這雖然無關(guān)緊要，但的確是個(gè)多余的操作。 ## 加入驗(yàn)證 最后我們加入對(duì)班主任的驗(yàn)證，未設(shè)置班主任時(shí)顯示相關(guān)的錯(cuò)誤信息： ```html +++ b/first-app/src/app/clazz/edit/edit.component.html @@ -13,7 +13,7 @@ <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> <app-klass-select [id]="teacherId" (beChange)="onTeacherChange($event)"></app-klass-select> - <small class="text-danger"> + <small class="text-danger" *ngIf="teacherId === undefined"> 必須指定一個(gè)班主任 </small> </div> ``` 再次測試，錯(cuò)誤消失：  ## 本節(jié)作業(yè) 嘗試在教師選擇組件中，引入一個(gè)緩存變量`idInput` ，并使用其來規(guī)避在組件初始化時(shí)彈出的多余數(shù)據(jù)。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.4.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.4.3.zip) |