# 插值與模板表達式 在更新以前，我們需要根據ID獲取到原教師的數據信息，我們為大家在后臺內置了兩個教師（還包括一些同學們后來添加的數據）：id為1的張三以及id為2的李四。在此我們假設用戶訪問http://localhost:4200/edit/2來嘗試編輯李四的基本信息。 > 為了減輕些服務器壓力，后臺的數據每天凌晨重置一次。 ## 獲取教師信息 獲取某個教師的接口信息如下： ```bash GET /teacher/{id} ``` | **類型Type** | **名稱Name** | **描述Description** | **類型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Response | | | `{id: number, username: string, name: string, email: string, sex: boolean}` | 根據接口，我們簡單整理思路如下： ```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('獲取到的路由參數id值為', id); + + // 拼接請求URL + // 發起請求，成功時并打印請求結果，失敗時打印失敗結果 } } ``` 我們在正式編輯前用注釋的方式給出了編程的思路，這是個非常好且應該保持習慣。有些事情，不要因為感覺簡單就不想做。我們之所以寫**優秀、易讀**的代碼，是為使以后的變更、閱讀更輕松。對于我們而言，只有**變化**是永遠不變的。我們應該以敞開的心態去迎接變化，而不是報怨，因為報怨解決不了任何問題，它的唯一作用便是使原本愉悅的心情變糟糕。 根據注釋添加代碼后，最后的代碼如下： ```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('獲取到的路由參數id值為', id); + + // 拼接請求URL + const url = 'http://angular.api.codedemo.club:81/teacher/' + id; + // 發起請求，成功時并打印請求結果，失敗時打印失敗結果 + this.httpClient.get(url) + .subscribe((data) => { + console.log('成功', data); + }, (error) => { + console.log('失敗', error); + }); } } ``` 當回調函數中僅有一個參數時，我們可以省略包含參數的`()`，所以上述請求代碼還可以簡化為： ```typescript this.httpClient.get(url) - .subscribe((data) => { + .subscribe(data => { console.log('成功', data); - }, (error) => { + }, error => { console.log('失敗', error); }); } ``` 同時，當回調函數方法體中的代碼僅有一行時，還可以省略包含方法體的`{}`，同時刪除那僅有一行的代碼的結束符`;`，則上述代碼還可以簡化為： ```typescript this.httpClient.get(url) - .subscribe(data => { - console.log('成功', data); - }, error => { - console.log('失敗', error); - }); + .subscribe(data => + console.log('成功', data) + , error => + console.log('失敗', error) + ); } ``` 如果這一行代碼不長，我們還可以將其寫到一行當中： ```typescript this.httpClient.get(url) - .subscribe(data => - console.log('成功', data) - , error => - console.log('失敗', error) + .subscribe(data => console.log('成功', data), + error => console.log('失敗', error) ); } ``` 當然了，掌握了這個原則上，你可以在以提升代碼易讀性為目的前提下，按自己的喜好隨意改寫。  ## 插值與模板表達示 在控制臺中查看數值是個不錯的習慣，但有時候不夠直觀。接下來，我們將后臺請求回的數據直接顯示在V層，以達到快速便捷查看的目的。組件中的`public`變量通行為V層與C層之間，若要V層中顯示，則可以可以在C層中定義`public`類型的變量即可： ```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`類型的屬性還可以省略該關鍵字，所以我們在聲明`public`屬性時，更愿意省略`public`關鍵字: ```typescript - public teacher: any; + teacher: any; ``` > 在這里我們將`teacher`類型聲明為`any`，表示其可以是任意類型。后期我們將逐步修正此寫法。在生產項目中，我們有時候會臨時使用`any`來聲明一些暫時未知的類型。 然后將請求成功獲取的數據放到`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; // 發起請求，成功時并打印請求結果，失敗時打印失敗結果 this.httpClient.get(url) - .subscribe(data => console.log('成功', data), + .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); } ``` 并使用**插值{{}}**與**模板表達式**將其顯示在V層： ```typescript +++ b/first-app/src/app/edit/edit.component.html @@ -1,3 +1,4 @@ +{{teacher | json}} <div> 姓名：<input value="張三"> </div> ``` `{{}}`被稱為插值表達式，`|`則是模板表達式中的一個。`|`又被稱為管道(pipe)符，這里的`json`則是Angular內置的管道之一，起的作用是將JSON對象轉換為JSON字符串。通常被我們用于在V層中快速查看JSON對象的值： ?  ## 本節作業 請嘗試使用`[(ngModel)]`其綁定到`src/app/edit/edit.component.html`的`input`標簽上。  你可能需要如下代碼： ```typescript // 發起請求，成功時并打印請求結果，失敗時打印失敗結果 - this.httpClient.get(url) + this.httpClient.get<any>(url) .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); ``` 其它的知識點請參考已學習的章節。請完成該作業后繼續學習。 | 名稱 | 地址 | 備注 | | ---------------- | ------------------------------------------------------------ | ---- | | 插值與模板表達式 | [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) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.3.zip) | |