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

在正式開始前，請嘗試參考刪除教師一節(jié)完成班級的刪除功能。 ## 原型 刪除功能沒有專門的原型，它存在于班級列表原型中：  ## 功能初始化 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`方法，并在控制臺打印傳入數(shù)據(jù)： ```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} ``` 為此設(shè)置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+)' } ]; } ``` ## 完成功能 有了刪除教師的經(jīng)驗(yàn)，刪除班級功能的實(shí)現(xiàn)便易如反掌了。 ```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)); } } ``` 點(diǎn)擊刪除按鈕：  對應(yīng)的班級成功刪除：  控制臺打印刪除成功的信息：  ## 確認(rèn)提示 一般在涉及到一些不可逆的操作時(shí)，我們都會友好的給出用戶提示，防止用戶的誤操作。而**刪除**操作則是一個(gè)典型的不可逆操作。為此，在刪除前讓用戶確認(rèn)一下是否這么做便顯示很有必要。瀏覽器提供了一個(gè)`confirm(message: string)`方法顯示確認(rèn)框，當(dāng)用戶點(diǎn)擊**確認(rèn)**時(shí)，該方法將返回`true`；點(diǎn)擊**取消**時(shí)，該方法將返回`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('該操作不可逆，請確認(rèn)'); + if (result) { + this.httpClient.delete<void>('/clazz/' + clazzId.toString()) + .subscribe(() => { + console.log('刪除成功'); + this.pageData.content.splice(index, 1); + }, error => console.log('刪除失敗', error)); + } } } ``` 此時(shí)再次點(diǎn)擊**刪除**按鈕，則將彈出一個(gè)對話框：  > 根據(jù)瀏覽器語言不同，彈出的按扭提示不同。筆者的瀏覽器當(dāng)前為語言設(shè)置的為英文，所以按鈕提示為Cancel與OK；瀏覽器語言為中文時(shí)按鈕提示為取消與確認(rèn)。 如果用戶點(diǎn)擊了確認(rèn)，則刪除操作執(zhí)行；如果點(diǎn)擊了取消，則不執(zhí)行刪除操作。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | confirm | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.5.zip) |