Angular 14 Http Get请求传递对象参数报错问题

错误原因 #

Angular HttpClient.get() 方法的第二个参数是请求配置选项（HttpOptions），而非直接传递的业务参数对象。你直接传入 InboxParameter 实例，TypeScript 会将其误判为请求配置，导致返回的 Observable 类型与声明的 Observable<InboxItem[]> 不兼容，从而抛出类型错误。

另外，HTTP GET 请求通常通过查询字符串传递参数，而非请求体（部分后端虽支持 GET 带请求体，但并非标准做法，且 Angular get 方法不支持直接传请求体）。

解决步骤 #

1. 修改 Angular 服务的请求代码

将 InboxParameter 转换为查询参数，放入 HttpOptions 的 params 属性中：

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

// ...

getInbox(inboxParameter: InboxParameter): Observable<InboxItem[]> {    
    let url = `${this.baseUrl}/${ApiPaths.Automation}/GetInbox`;
    
    // 方式1：手动构建查询参数（适合参数少的场景）
    const params = new HttpParams()
      .set('userId', inboxParameter.userId)
      .set('inboxFolderId', inboxParameter.inboxFolderId.toString());
    
    // 方式2：从对象自动转换（适合参数多的场景）
    // const params = new HttpParams({ fromObject: { ...inboxParameter } });
    
    return this.http.get<InboxItem[]>(url, { params });
}

2. 确保后端正确接收查询参数

如果使用 ASP.NET Core，需要在参数上添加 [FromQuery] 特性，明确告知框架从查询字符串中绑定参数：

public ActionResult<List<BLL.DTO.AutomationDTO.InboxItem>> GetInbox([FromQuery] BLL.DTO.AutomationDTO.InboxParameter Parameter)
{
    // 业务逻辑...
}

验证要点 #

• 确保 Angular 传递的查询参数名称（如 userId、inboxFolderId）与后端 InboxParameter 类的属性名完全一致（大小写敏感，需匹配后端配置）。
• 若后端使用其他框架，需对应配置查询参数的绑定规则。

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