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

# 更新教師 本節(jié)我們開始定制保存按鈕觸發(fā)的`onSubmit()`方法來完成與后臺的對接，完成教師的更新功能。 我們?yōu)榇蠹姨峁┑暮笈_接口信息如下： ```bash PUT /teacher/{id} ``` | **類型Type** | **名稱Name** | **描述Description** | **類型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Body | teacher | 教師 | `{username: string, name: string, email: string, sex: boolean}` | | Response | 成功 | Status Code: 204 | `{id: number, username: string, name: string, email: string, sex: boolean}` | ## 雙向數(shù)據(jù)綁定 Angular模板驅(qū)動表單的`[(ngModel)]`提供了一種機制：當用戶變更表單中的內(nèi)容時，內(nèi)容會實時的更新到C層的變量上；C層變量發(fā)生變更時，內(nèi)容也會實時的更新到表單中。我們把這種機制稱為：雙向數(shù)據(jù)綁定。 我們簡單改寫下`onSubmit()`方法，使其打印當前的`teacher`屬性至控制臺： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -33,6 +33,6 @@ export class EditComponent implements OnInit { } onSubmit(): void { - console.log('點擊提交按鈕'); + console.log(this.teacher); } } ```  此時當我們變更姓名時，能夠在V層的中能過`{{teacher | json}}`實時地查看到C層`teacher`的變化情況，點擊保存按鈕時可以看到`name`的值也進行了同步變更。 這便是**雙向數(shù)據(jù)綁定**的魅力 ---- 當一方數(shù)據(jù)變化時，另一方的數(shù)據(jù)也同步發(fā)生變化。 ## 數(shù)據(jù)更新 接下來開始完成數(shù)據(jù)更新功能，首先：寫注釋！ ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -33,6 +33,8 @@ export class EditComponent implements OnInit { } onSubmit(): void { - console.log('點擊提交按鈕'); + console.log(this.teacher); + // 獲取ID，拼接URL + // 發(fā)起請求，更新教師，成功時打印請求結(jié)果并刷新教師列表查看效果，失敗時打印失敗結(jié)果 } } ``` 然后才是功能開發(fā)： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -35,6 +35,11 @@ export class EditComponent implements OnInit { onSubmit(): void { console.log(this.teacher); // 獲取ID，拼接URL + const url = 'http://angular.api.codedemo.club:81/teacher/' + + this.activeRoute.snapshot.params.id; // 發(fā)起請求，更新教師，成功時打印請求結(jié)果并刷新教師列表查看效果，失敗時打印失敗結(jié)果 + this.httpClient.put(url, this.teacher) + .subscribe(data => console.log('更新成功', data), + error => console.log('更新錯誤', error)); } } ```  再次刷新當前頁面，教師列表中的數(shù)據(jù)也同步的更新了。  嗯，甚好。 ## 父子組件 如果編輯組件更新某個教師后，教師列表能夠同步的刷新。那當然也是極好的。為此，我們需要深入對當前的教師列表、教師編輯組件進行學(xué)習(xí)。 若要教師列表組件的數(shù)據(jù)被更新，首先我們要找到其組件中數(shù)據(jù)更新對應(yīng)的代碼，打開組件C層文件后發(fā)現(xiàn)其`ngOnInit`方法中完成了獲取后臺教師列表的功能： ```typescript /** * 組件初始化完成后將被自動執(zhí)行一次 */ ngOnInit(): void { this.httpClient.get<[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } } ``` 如若實現(xiàn)更新后刷新教師列表，則想辦法調(diào)用該`ngOnInit`方法即可： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -39,7 +39,10 @@ export class EditComponent implements OnInit { this.activeRoute.snapshot.params.id; // 發(fā)起請求，更新教師，成功時打印請求結(jié)果并刷新教師列表查看效果，失敗時打印失敗結(jié)果 this.httpClient.put(url, this.teacher) - .subscribe(data => console.log('更新成功', data), + .subscribe(data => { + console.log('更新成功', data); + // 在此調(diào)用教師列表App組個的ngOnInit方法，即可實現(xiàn)更新后重新刷新教師列表的功能 + }, error => console.log('更新錯誤', error)); } } ``` 非常幸運的是可能由于Angular早到想到了這層需求（實際上沒有，因為Anguar并不推薦我們這么樣），我們可以在子組件Edit中以依賴注入的方式來獲取到其父App組件： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -1,6 +1,7 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {HttpClient} from '@angular/common/http'; +import {AppComponent} from '../app.component'; @Component({ selector: 'app-edit', @@ -17,7 +18,8 @@ export class EditComponent implements OnInit { }; constructor(private activeRoute: ActivatedRoute, - private httpClient: HttpClient) { + private httpClient: HttpClient, + private appComponent: AppComponent) { } ngOnInit(): void { ``` 接著調(diào)用該父組件對應(yīng)的`ngOnInit`方法，便可實現(xiàn)更新后自動刷新教師列表的功能： ```typescript --- a/first-app/src/app/edit/edit.component.ts +++ b/first-app/src/app/edit/edit.component.ts @@ -44,6 +44,7 @@ export class EditComponent implements OnInit { .subscribe(data => { console.log('更新成功', data); // 在此調(diào)用教師列表App組個的ngOnInit方法，即可實現(xiàn)更新后重新刷新教師列表的功能 + this.appComponent.ngOnInit(); }, error => console.log('更新錯誤', error)); } ```  總結(jié)：Angular的依賴注入不僅僅能注入服務(wù)，還可以注入父組件。依賴注入只所以會成功，是因為 Angular有注入該類型實例的能力；而依賴注入只所以會失敗，則是因為Anuglar沒有注入該類型實例的能力。 ## 本節(jié)作業(yè) 參考教師添加組件，為教師編輯組件添加樣式，美化該教師編輯組件界面（如果在第一小節(jié)中已完成，請忽略）。同時去除在V層的測試痕跡`{{teacher | json}}`。 > 紙上得來終覺淺，絕知此事要躬行。看似簡單的bootstrap界面美化，你成功了嗎？ 本節(jié)作業(yè)無參考答案，請完成本節(jié)作業(yè)后繼續(xù)學(xué)習(xí)下一節(jié)。 | 名稱 | 地址 | | | -------- | ------------------------------------------------------------ | ---- | | 雙向綁定 | [https://angular.cn/guide/two-way-binding#two-way-binding](https://angular.cn/guide/two-way-binding#two-way-binding) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.5.zip) | |