Angular如何向C#后端API发送多模型请求？

错误原因 #

你当前的写法触发类型错误，是因为Angular HttpClient.post 的第三个参数是请求配置选项（如请求头、响应类型等），而非第二个请求体参数。直接传入salary会被当作配置项处理，导致类型不匹配。

推荐解决方案：创建合并请求DTO #

REST API设计中，通常通过单一请求体传递复杂数据，这种方式结构清晰且易于扩展。

后端C#修改

新建一个合并两个模型的DTO类，然后修改接口方法参数：

// 新增合并请求类
public class EditProfileClientRequest
{
    public ProfileClient ProfileClient { get; set; }
    public Salary Salary { get; set; }
}

// 更新接口方法
public async Task<ActionResult> EditProfileClient([FromBody] EditProfileClientRequest request)
{
    // 从request中获取两个模型数据
    var profileClient = request.ProfileClient;
    var salary = request.Salary;
    
    // 原有业务逻辑...
    return Ok(model);
}

前端Angular修改

将两个模型合并成一个对象作为请求体发送：

// 可选：定义对应类型保证类型安全
interface EditProfileClientRequest {
  profileClient: ProfileClientModel;
  salary: SalaryModel;
}

public editProfileClient(profileClient: ProfileClientModel, salary: SalaryModel) {
  const requestBody: EditProfileClientRequest = {
    profileClient,
    salary
  };
  
  return this.http
    .post<ProfileClientModel>(`${this.url}/editProfileClient`, requestBody)
    .pipe(map(result => result));
}

备选方案：通过查询参数传递（适合简单类型） #

如果必须保留后端的两个独立参数，可以将其中一个模型（建议是结构简单的）转为查询参数传递：

后端C#修改

用[FromQuery]标记查询参数：

public async Task<ActionResult> EditProfileClient([FromBody] ProfileClient profileClient, [FromQuery] Salary salary)
{
    // 业务逻辑...
    return Ok(model);
}

前端Angular修改

将Salary对象序列化为查询参数：

import { HttpParams } from '@angular/common/http';

public editProfileClient(profileClient: ProfileClientModel, salary: SalaryModel) {
  let params = new HttpParams();
  // 遍历Salary属性，添加为查询参数
  Object.keys(salary).forEach(key => {
    params = params.append(key, salary[key]);
  });

  return this.http
    .post<ProfileClientModel>(`${this.url}/editProfileClient`, profileClient, { params })
    .pipe(map(result => result));
}

注意：如果Salary是包含嵌套对象的复杂模型，查询参数的方式会增加序列化复杂度，因此优先推荐第一种DTO方案。

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