Angular+ASP.NET项目DELETE、UPDATE请求无法正常调用问题求助

你的问题集中在Angular服务的请求路径拼接错误和传参格式不符合HttpClient的规范两个点，具体修复步骤如下：

1. 修复SharedService中的请求方法 #

Angular HttpClient的delete方法第二个参数为请求配置项，不是请求体；put/delete请求需要将资源ID直接拼接在URL路径中，和你后端路由[HttpDelete("{id}")]的规则匹配。
修改后的服务代码如下：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  readonly APIUrl = "https://localhost:44348"

  constructor(private http:HttpClient) { }

  getGameList():Observable<any[]>{
    return this.http.get<any>(this.APIUrl+'/Games');
  }

  addGame(val:any){
    return this.http.post(this.APIUrl+'/Games',val);
  }

  // 新增id参数，拼接到URL路径中，请求体传更新后的数据
  updateGame(id: number, val:any){
    return this.http.put(`${this.APIUrl}/Games/${id}`, val);
  }

  // 只接收id参数，拼接到URL路径中，delete不需要传请求体
  deleteGame(id: number){
    return this.http.delete(`${this.APIUrl}/Games/${id}`);
  }

  // 顺便修正按名称查询的方法，用HttpParams传查询参数
  getGamesByName(name: string){
    const params = new HttpParams().set('name', name);
    return this.http.get<any>(`${this.APIUrl}/Games`, { params });
  }
}

2. 修复组件中的方法调用 #

你现在调用deleteGame时传的是整个游戏对象，需要改为只传ID值：

deleteClick(item:any){
  // 改为传item.id
  this.service.deleteGame(item.id).subscribe(data => {
    alert('删除成功');
    this.refreshGameList();
  })
}

3. 补充更新操作的调用规范 #

编辑弹窗提交更新时，调用updateGame需要同时传入游戏ID和更新后的对象，示例如下：

// 编辑组件提交时的调用示例
submitUpdate(){
  this.service.updateGame(this.game.id, this.game).subscribe(res => {
    // 关闭弹窗、刷新列表逻辑
  })
}

修改完成后DELETE和PUT请求的路径就会自动拼接成你预期的https://localhost:44348/Games/{id}格式，和后端路由匹配。

内容的提问来源于stack exchange，提问作者Rogal