在正式开始前，请尝试参考删除教师一节完成班级的删除功能。 ## 原型 删除功能没有专门的原型，它存在于班级列表原型中：  ## 功能初始化 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) |