在正式開始前，請嘗試參考刪除教師一節完成班級的刪除功能。 ## 原型 刪除功能沒有專門的原型，它存在于班級列表原型中：  ## 功能初始化 V層增加方法，并將`index`及要刪除的班級`id`傳入C層： ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -22,7 +22,7 @@ <a class="btn btn-outline-primary btn-sm"> <i class="fas fa-pen"></i>編輯 </a> - <span class="btn btn-sm btn-outline-danger"> + <span class="btn btn-sm btn-outline-danger" (click)="onDelete(index, clazz.id)"> <i class="far fa-trash-alt"></i>刪除 </span> </td> ``` 在C層中增加`onDelete`方法，并在控制臺打印傳入數據： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -49,4 +49,8 @@ export class ClazzComponent implements OnInit { console.log(pageData); }); } + + onDelete(index: number, clazzId: number): void { + console.log('onDelete called', index, clazzId); + } } ```  ## Api 后臺提供的Api如下： ``` DELETE /clazz/{id} ``` 為此設置MockApi如下： ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -110,6 +110,10 @@ export class ClazzMockApi implements MockApiInterface { } as Teacher } as Clazz; } + }, + { + method: 'DELETE', + url: '/clazz/(\\d+)' } ]; } ``` ## 完成功能 有了刪除教師的經驗，刪除班級功能的實現便易如反掌了。 ```typescript onDelete(index: number, clazzId: number): void { console.log('onDelete called', index, clazzId); + this.httpClient.delete<void>('/clazz/' + clazzId.toString()) + .subscribe(() => { + console.log('刪除成功'); + this.pageData.content.splice(index, 1); + }, error => console.log('刪除失敗', error)); } } ``` 點擊刪除按鈕：  對應的班級成功刪除：  控制臺打印刪除成功的信息：  ## 確認提示 一般在涉及到一些不可逆的操作時，我們都會友好的給出用戶提示，防止用戶的誤操作。而**刪除**操作則是一個典型的不可逆操作。為此，在刪除前讓用戶確認一下是否這么做便顯示很有必要。瀏覽器提供了一個`confirm(message: string)`方法顯示確認框，當用戶點擊**確認**時，該方法將返回`true`；點擊**取消**時，該方法將返回`false`。 ```typescript onDelete(index: number, clazzId: number): void { console.log('onDelete called', index, clazzId); - this.httpClient.delete<void>('/clazz/' + clazzId.toString()) - .subscribe(() => { - console.log('刪除成功'); - this.pageData.content.splice(index, 1); - }, error => console.log('刪除失敗', error)); + const result = confirm('該操作不可逆，請確認'); + if (result) { + this.httpClient.delete<void>('/clazz/' + clazzId.toString()) + .subscribe(() => { + console.log('刪除成功'); + this.pageData.content.splice(index, 1); + }, error => console.log('刪除失敗', error)); + } } } ``` 此時再次點擊**刪除**按鈕，則將彈出一個對話框：  > 根據瀏覽器語言不同，彈出的按扭提示不同。筆者的瀏覽器當前為語言設置的為英文，所以按鈕提示為Cancel與OK；瀏覽器語言為中文時按鈕提示為取消與確認。 如果用戶點擊了確認，則刪除操作執行；如果點擊了取消，則不執行刪除操作。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | confirm | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.5.zip) |