本節我們完成教師管理中的最后一個功能模塊 ---- 刪除教師。 相對添加教師、編輯教師模塊，刪除教師相對要簡單一些。刪除功能直接集成在了教師列表模塊中，僅僅作為教師列表App組件的功能出現。 接下來讓我們共同實現教師的刪除功能。 ## type定義類型 在上節中，大家完成了App組件`teachers`屬性類型由`any`改寫的工作，參考答案如下： 第一種方式： ```typescript +++ b/first-app/src/app/app.component.ts @@ -8,7 +8,12 @@ import {HttpClient} from '@angular/common/http'; }) export class AppComponent implements OnInit { // 初始化教師數組 - teachers = [] as any[]; + teachers = [] as { + name: string, + username: string, + email: string, + sex: true + }[]; constructor(private httpClient: HttpClient) { console.log(httpClient); @@ -18,7 +23,12 @@ export class AppComponent implements OnInit { * 組件初始化完成后將被自動執行一次 */ ngOnInit(): void { - this.httpClient.get<[]>('http://angular.api.codedemo.club:81/teacher') + this.httpClient.get<{ + name: string, + username: string, + email: string, + sex: true + }[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } } ``` 第二種方式： ```typescript +++ b/first-app/src/app/app.component.ts @@ -8,7 +8,7 @@ import {HttpClient} from '@angular/common/http'; }) export class AppComponent implements OnInit { // 初始化教師數組 - teachers = [] as any[]; + teachers = [] as Teacher[]; constructor(private httpClient: HttpClient) { console.log(httpClient); @@ -18,7 +18,17 @@ export class AppComponent implements OnInit { * 組件初始化完成后將被自動執行一次 */ ngOnInit(): void { - this.httpClient.get<[]>('http://angular.api.codedemo.club:81/teacher') + this.httpClient.get<Teacher[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } } + +/** + * 定義一個類型 + */ +type Teacher = { + name: string, + username: string, + email: string, + sex: true +}; ``` 教程中，我們基于第二種方式繼續向下進行。 ## 觸發方法 用戶點擊刪除時，需要對應觸發C層的方法來完成刪除功能。Angular中每個html元素都添加了`click`事件，使用方法如下： ```html +++ b/first-app/src/app/app.component.html @@ -17,7 +17,7 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td>刪除</td> + <td (click)="C層對應的方法()">刪除</td> </tr> </tbody> </table> ``` 此時當我們點擊`td`元素時，則C對應的方法將被觸發。比如我們在C層定義如下方法： ```typescript +++ b/first-app/src/app/app.component.ts @@ -21,6 +21,10 @@ export class AppComponent implements OnInit { this.httpClient.get<Teacher[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } + + onDelete(): void { + console.log('onDelete called'); + } } /** ``` 將`fdescript`移動到`src/app/app.component.spec.ts`中，并使用`ng t`啟動系統：  控制臺發生了如上錯誤，它的意思是說當前測試模塊并不認識`<router-outlet></router-outlet>`，解決該問題需要我們前面學習過的兩個知識點： 1. 我們在前面提起過，提供`<router-outlet></router-outlet>`的provider為`RouterModule` 2. `RouterModule`僅用于`ng s`中，對應在單元測試`ng t`中應該使用`RouterTestingModule`來替換`RouterModule`. ```typescript +++ b/first-app/src/app/app.component.spec.ts @@ -1,12 +1,14 @@ import {TestBed} from '@angular/core/testing'; import {AppComponent} from './app.component'; import {HttpClientModule} from '@angular/common/http'; +import {RouterTestingModule} from '@angular/router/testing'; -describe('AppComponent', () => { +fdescribe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - HttpClientModule + HttpClientModule, + RouterTestingModule ], declarations: [ AppComponent ```  ## 對接后臺 我們為大家提供的刪除接口如下： ```bash DELETE /teacher/{id} ``` 將要刪除教師的ID使用delete方法向后臺發起請求則可以完成對應教師的刪除功能。在請求所有教師時，后臺同樣攜帶了ID屬性。 ```bash GET /teacher ``` | **類型Type** | **名稱Name** | **描述Description** | **類型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Response | | | `[{id: number, username: string, name: string, email: string, sex: boolean}, {...}]` | 我們在`Teacher`類型中增加ID屬性，并將其應用到V層： ```typescript +++ b/first-app/src/app/app.component.ts @@ -31,6 +31,7 @@ export class AppComponent implements OnInit { * 定義一個類型 */ type Teacher = { + id: number, name: string, username: string, email: string, ``` ```html +++ b/first-app/src/app/app.component.html @@ -17,7 +17,7 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td (click)="onDelete()">刪除</td> + <td (click)="onDelete(teacher.id)">刪除</td> </tr> </tbody> </table> ``` 然后繼續在C層的onDelete方法中添加接收教師ID的參數: ```typescript +++ b/first-app/src/app/app.component.ts @@ -22,8 +22,8 @@ export class AppComponent implements OnInit { .subscribe(teachers => this.teachers = teachers); } - onDelete(): void { - console.log('onDelete called'); + onDelete(id: number): void { + console.log('onDelete called', id); } } ``` 如此以來，在V層點擊`刪除`時C層便可以接收到預刪除教師的ID值。  接下來我們完成刪除功能： ```typescript +++ b/first-app/src/app/app.component.ts @@ -22,8 +22,11 @@ export class AppComponent implements OnInit { .subscribe(teachers => this.teachers = teachers); } - onDelete(): void { - console.log('onDelete called'); + onDelete(id: number): void { + const url = `http://angular.api.codedemo.club:81/teacher/${id}`； ?? + this.httpClient.delete(url) + .subscribe(data => console.log('刪除成功'), + error => console.log('刪除失敗', error)); } } ``` - 注意：我們在此使用是`` ` ``而非`'`，該按鍵在鍵盤上位于按鍵`1`的左側。使用````` ``` 可以在其中以`${xxx}`的方式快速嵌入變量。`` `123${a}` `` 等價于`'123' + a`。?? 刪除成功后調用`ngOnInit`方法重新請求數據： ```typescript +++ b/first-app/src/app/app.component.ts @@ -25,7 +25,7 @@ export class AppComponent implements OnInit { onDelete(id: number): void { const url = `http://angular.api.codedemo.club:81/teacher/${id}`; this.httpClient.delete(url) - .subscribe(data => console.log('刪除成功'), + .subscribe(??() => this.ngOnInit(), error => console.log('刪除失敗', error)); } } ``` - ?? 當請求沒有返回值時，此處的參數留空即可，但不能省略`()` > **注意**：受后臺限制，你無法刪除ID為1，2的教師預留數據。 我們在Add組件中隨意添加一個測試數據：  然后點擊其刪除按扭后：  測試成功。 ## 本節作業 1. 將前面章節中使用到字符串拼接變更為`` ` ` ``的形式。 2. 嘗試刪除教師張三、教師李四，并在控制臺中查看錯誤。 | 名稱 | 地址 | 備注 | | ------------------ | ------------------------------------------------------------ | ---- | | 綁定語法 | [https://angular.cn/guide/binding-syntax#binding-types-and-targets](https://angular.cn/guide/binding-syntax#binding-types-and-targets) | | | TypeScript高級類型 | [https://typescript.bootcss.com/advanced-types.html](https://typescript.bootcss.com/advanced-types.html) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.5.zip) | |