如何在Angular中以Query String传递ID调用ASP.NET REST API？

你遇到的核心问题是前端路由参数类型不匹配，同时后端的Query参数处理可以更规范，下面分步骤解决：

一、修复前端类型错误 #

组件中params.get('id')返回的是string | null类型，但你的服务方法要求传入number，必须先做空值校验和类型转换：

修改组件的ngOnInit代码：

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const idStr = params.get('id');
    // 先校验参数非空，再转换为数字
    if (idStr) {
      const id = Number(idStr);
      // 额外校验转换有效性，避免非数字字符串传入
      if (!isNaN(id)) {
        this.advertisementService.getAdvertisement(id).subscribe(response => {
          this.advDetails = response;
        }, error => {
          console.error('获取广告详情失败:', error);
        });
      } else {
        console.error('无效的ID参数：必须是数字');
      }
    } else {
      console.error('未获取到ID参数');
    }
  });
}

二、优化Angular服务的请求写法（推荐） #

直接拼接Query String容易出现编码问题，建议用Angular内置的HttpParams构建请求参数，更规范可靠：

修改服务类的getAdvertisement方法：

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

// ...

getAdvertisement(id: number): Observable<Advertisement> {
  const params = new HttpParams().set('id', id.toString());
  return this.http.get<Advertisement>(`${this.baseApiUrl}/api/advertisements`, { params });
}

三、优化后端ASP.NET Core Action #

手动从Request.Query提取参数的方式冗余，ASP.NET Core支持直接将Query参数绑定到Action参数，框架会自动处理类型转换和校验：

修改控制器的Action：

[HttpGet]
public IActionResult GetAdvertisements([FromQuery] int? id)
{
    try
    {
        if (id.HasValue && id.Value > 0)
        {
            AdvertisementModel adv = new AdvertisementsHandler().GetAdv(id.Value).ToModel();
            return Ok(adv);
        }
        // 可选：如果没有传id，可返回所有广告列表
        // var allAdvertisements = ...;
        // return Ok(allAdvertisements);
        return BadRequest("无效的ID参数");
    }
    catch (Exception ex)
    {
        return StatusCode(500, ex.Message); // 返回具体错误信息更便于调试
    }
}

这样修改后，代码可读性更高，也能避免手动转换参数时可能出现的错误。

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