如何向 Angular HttpClient 添加删除功能答案

【问题标题】：How to add a delete function to angular HttpClient如何向 Angular HttpClient 添加删除功能
【发布时间】：2022-01-05 17:09:26
【问题描述】：

我一直在研究链接到我的后端 API 的 Angular。我可以从后端检索我的企业列表并发布评论等。但我无法删除记录。我在后端调用 delete 函数，但没有任何反应。这是我的参考代码：

web.service.ts：

public deleteBusiness(id: any){
    **return this.http.delete('http://localhost:5000/api/v1.0/businesses/' + this.id);**

business.component.ts

deleteBusiness(){
  **this.webService.deleteBusiness(this.route.snapshot.params['id']).subscribe(**
    (resp) => {
      console.log(resp);
    },
    (err) => console.log(err)
  );

和 html 按钮：

 <button type="button" class="btn btn-danger" (click) ="deleteBusiness"> Delete</button>

我觉得这可能与我用'**'标记的两行代码有关，以供参考。任何帮助或指出正确的方向将不胜感激，谢谢。

【问题讨论】：

在模板中调用deleteBusiness：(click) ="deleteBusiness()"
好点！你真的在打你的 deleteBusiness() 方法吗？如果是这样，那么我会在你的服务器代码中设置一个断点，看看它是否被命中。如果没有，你的路线可能是错误的。

标签： angular api crud

【解决方案1】：

当您在像 (eventName)="$handler" 这样的模板中添加事件侦听器时，您需要记住 $hanler 在这种情况下不是回调绑定。它将在回调内部传递的代码。你可以在这个地方写逻辑，例如：(click)="callFunction(); $event.preventDefault();"

函数看起来一切正常，只是没有调用函数。

【讨论】：

啊，是的，我现在理解得更好了，那么我必须添加什么才能调用该函数？我以为我正确地调用了它。是 (this.http.delete('localhost:5000/api/v1.0/businesses' + this.id) 的问题还是我在 business.component.ts 中的 deleteBusiness 之间称其错误
将模板中的(click) ="deleteBusiness" 替换为(click) ="deleteBusiness()"。