如何从Angular服务向ASP.NET Core 5控制器方法传递多个参数？

一、适配后端[FromQuery]的正确Angular实现 #

你的后端控制器方法通过[FromQuery]绑定URL查询参数，因此Angular端需要将参数封装为查询字符串传递，而非请求体。具体实现如下：

import { HttpClient, HttpParams } from '@angular/common/http';
// 导入其他必要依赖

// 服务方法定义
getAllCustomersByDateRange(firstDate: Date, endDate: Date, customerId: number): Observable<PaymentForList[]> {
  // 构建查询参数对象
  const params = new HttpParams()
    .set('firstDate', firstDate.toISOString())
    .set('endDate', endDate.toISOString())
    .set('customerId', customerId.toString());

  // 传递参数并发起请求
  return this.http.get<PaymentForList[]>(
    `${this.baseUrl}/getAllCustomerPaymentsByDateRange`,
    { params }
  );
}

关键细节： #

• 使用toISOString()将Date对象转换为.NET DateTime可解析的标准格式（如2024-05-20T12:00:00.000Z）
• HttpParams会自动处理参数的URL编码，避免特殊字符导致的请求错误
• URL末尾无需额外添加斜杠，防止出现//getAllCustomerPaymentsByDateRange这类无效路径

二、[FromBody]方案报错的原因 #

HTTP规范中GET请求不包含请求体，ASP.NET Core对GET方法的[FromBody]支持几乎无效，同时Angular的HttpClient.get()默认也不会发送请求体。这导致后端无法正确解析参数，返回的响应格式不符合预期（比如返回错误信息的ArrayBuffer），最终触发类型不匹配的报错。

三、其他可选实现方式 #

如果需要传递大量复杂参数，可改用POST请求（需注意不符合RESTful查询资源的设计原则，仅适合特殊场景）：

后端修改： #

[HttpPost("getAllCustomerPaymentsByDateRange")]
public async Task<IActionResult> GetAllCustomerPaymentsByDateRange([FromBody] ModelParams params)
{
    // 业务逻辑实现
}

// 定义参数模型
public class ModelParams
{
    public DateTime FirstDate { get; set; }
    public DateTime EndDate { get; set; }
    public long CustomerId { get; set; }
}

Angular端修改： #

getAllCustomersByDateRange(params: {firstDate: Date, endDate: Date, customerId: number}): Observable<PaymentForList[]> {
  // 将参数作为请求体传递
  return this.http.post<PaymentForList[]>(
    `${this.baseUrl}/getAllCustomerPaymentsByDateRange`,
    {
      firstDate: params.firstDate.toISOString(),
      endDate: params.endDate.toISOString(),
      customerId: params.customerId
    }
  );
}

内容的提问来源于stack exchange，提问作者R. Nourmandi