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

# 插值與模板表達(dá)式 在更新以前，我們需要根據(jù)ID獲取到原教師的數(shù)據(jù)信息，我們?yōu)榇蠹以诤笈_(tái)內(nèi)置了兩個(gè)教師（還包括一些同學(xué)們后來(lái)添加的數(shù)據(jù)）：id為1的張三以及id為2的李四。在此我們假設(shè)用戶(hù)訪(fǎng)問(wèn)http://localhost:4200/edit/2來(lái)嘗試編輯李四的基本信息。 > 為了減輕些服務(wù)器壓力，后臺(tái)的數(shù)據(jù)每天凌晨重置一次。 ## 獲取教師信息 獲取某個(gè)教師的接口信息如下： ```bash GET /teacher/{id} ``` | **類(lèi)型Type** | **名稱(chēng)Name** | **描述Description** | **類(lèi)型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Response | | | `{id: number, username: string, name: string, email: string, sex: boolean}` | 根據(jù)接口，我們簡(jiǎn)單整理思路如下： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -13,7 +13,9 @@ export class EditComponent implements OnInit { ngOnInit(): void { const id = this.activeRoute.snapshot.params.id; - console.log('獲取到的路由參數(shù)id值為', id); + + // 拼接請(qǐng)求URL + // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 } } ``` 我們?cè)谡骄庉嬊坝米⑨尩姆绞浇o出了編程的思路，這是個(gè)非常好且應(yīng)該保持習(xí)慣。有些事情，不要因?yàn)楦杏X(jué)簡(jiǎn)單就不想做。我們之所以寫(xiě)**優(yōu)秀、易讀**的代碼，是為使以后的變更、閱讀更輕松。對(duì)于我們而言，只有**變化**是永遠(yuǎn)不變的。我們應(yīng)該以敞開(kāi)的心態(tài)去迎接變化，而不是報(bào)怨，因?yàn)閳?bào)怨解決不了任何問(wèn)題，它的唯一作用便是使原本愉悅的心情變?cè)愀狻? 根據(jù)注釋添加代碼后，最后的代碼如下： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; +import {HttpClient} from '@angular/common/http'; @Component({ selector: 'app-edit', @@ -8,12 +9,22 @@ import {ActivatedRoute} from '@angular/router'; }) export class EditComponent implements OnInit { - constructor(private activeRoute: ActivatedRoute) { + constructor(private activeRoute: ActivatedRoute, + private httpClient: HttpClient) { } ngOnInit(): void { const id = this.activeRoute.snapshot.params.id; - console.log('獲取到的路由參數(shù)id值為', id); + + // 拼接請(qǐng)求URL + const url = 'http://angular.api.codedemo.club:81/teacher/' + id; + // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 + this.httpClient.get(url) + .subscribe((data) => { + console.log('成功', data); + }, (error) => { + console.log('失敗', error); + }); } } ``` 當(dāng)回調(diào)函數(shù)中僅有一個(gè)參數(shù)時(shí)，我們可以省略包含參數(shù)的`()`，所以上述請(qǐng)求代碼還可以簡(jiǎn)化為： ```typescript this.httpClient.get(url) - .subscribe((data) => { + .subscribe(data => { console.log('成功', data); - }, (error) => { + }, error => { console.log('失敗', error); }); } ``` 同時(shí)，當(dāng)回調(diào)函數(shù)方法體中的代碼僅有一行時(shí)，還可以省略包含方法體的`{}`，同時(shí)刪除那僅有一行的代碼的結(jié)束符`;`，則上述代碼還可以簡(jiǎn)化為： ```typescript this.httpClient.get(url) - .subscribe(data => { - console.log('成功', data); - }, error => { - console.log('失敗', error); - }); + .subscribe(data => + console.log('成功', data) + , error => + console.log('失敗', error) + ); } ``` 如果這一行代碼不長(zhǎng)，我們還可以將其寫(xiě)到一行當(dāng)中： ```typescript this.httpClient.get(url) - .subscribe(data => - console.log('成功', data) - , error => - console.log('失敗', error) + .subscribe(data => console.log('成功', data), + error => console.log('失敗', error) ); } ``` 當(dāng)然了，掌握了這個(gè)原則上，你可以在以提升代碼易讀性為目的前提下，按自己的喜好隨意改寫(xiě)。  ## 插值與模板表達(dá)示 在控制臺(tái)中查看數(shù)值是個(gè)不錯(cuò)的習(xí)慣，但有時(shí)候不夠直觀(guān)。接下來(lái)，我們將后臺(tái)請(qǐng)求回的數(shù)據(jù)直接顯示在V層，以達(dá)到快速便捷查看的目的。組件中的`public`變量通行為V層與C層之間，若要V層中顯示，則可以可以在C層中定義`public`類(lèi)型的變量即可： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -8,7 +8,7 @@ import {HttpClient} from '@angular/common/http'; styleUrls: ['./edit.component.css'] }) export class EditComponent implements OnInit { - + ?? public teacher: any; constructor(private activeRoute: ActivatedRoute, private httpClient: HttpClient) { } ``` 在typescript中，聲明`public`類(lèi)型的屬性還可以省略該關(guān)鍵字，所以我們?cè)诼暶鱜public`屬性時(shí)，更愿意省略`public`關(guān)鍵字: ```typescript - public teacher: any; + teacher: any; ``` > 在這里我們將`teacher`類(lèi)型聲明為`any`，表示其可以是任意類(lèi)型。后期我們將逐步修正此寫(xiě)法。在生產(chǎn)項(xiàng)目中，我們有時(shí)候會(huì)臨時(shí)使用`any`來(lái)聲明一些暫時(shí)未知的類(lèi)型。 然后將請(qǐng)求成功獲取的數(shù)據(jù)放到`teacher`屬性中： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -20,7 +20,7 @@ export class EditComponent implements OnInit { const url = 'http://angular.api.codedemo.club:81/teacher/' + id; // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 this.httpClient.get(url) - .subscribe(data => console.log('成功', data), + .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); } ``` 并使用**插值{{}}**與**模板表達(dá)式**將其顯示在V層： ```typescript +++ b/first-app/src/app/edit/edit.component.html @@ -1,3 +1,4 @@ +{{teacher | json}} <div> 姓名：<input value="張三"> </div> ``` `{{}}`被稱(chēng)為插值表達(dá)式，`|`則是模板表達(dá)式中的一個(gè)。`|`又被稱(chēng)為管道(pipe)符，這里的`json`則是Angular內(nèi)置的管道之一，起的作用是將JSON對(duì)象轉(zhuǎn)換為JSON字符串。通常被我們用于在V層中快速查看JSON對(duì)象的值： ?  ## 本節(jié)作業(yè) 請(qǐng)嘗試使用`[(ngModel)]`其綁定到`src/app/edit/edit.component.html`的`input`標(biāo)簽上。  你可能需要如下代碼： ```typescript // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 - this.httpClient.get(url) + this.httpClient.get<any>(url) .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); ``` 其它的知識(shí)點(diǎn)請(qǐng)參考已學(xué)習(xí)的章節(jié)。請(qǐng)完成該作業(yè)后繼續(xù)學(xué)習(xí)。 | 名稱(chēng) | 地址 | 備注 | | ---------------- | ------------------------------------------------------------ | ---- | | 插值與模板表達(dá)式 | [https://angular.cn/guide/interpolation#template-expressions](https://angular.cn/guide/interpolation#template-expressions) | | | JSON管道 | [https://angular.cn/api/common/JsonPipe](https://angular.cn/api/common/JsonPipe) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip) | |