Angular传ID数组调用.NET接口批量删除数据库记录报错排查

报错核心是前后端数组参数的序列化规则不匹配：

• Angular HttpParams.set() 直接传入数组时，默认会把数组序列化为逗号拼接的单字符串，最终请求的Query参数格式为 deviceIds=1,2,3,4
• .NET 后端的[FromQuery] int[]默认只识别同名参数重复拼接的数组格式，也就是deviceIds=1&deviceIds=2&deviceIds=3&deviceIds=4，收到逗号拼接的单值时无法完成参数绑定，直接返回400错误。

附报错截图内容翻译：HTTP 400 错误请求：参数格式无效，deviceIds字段无法绑定到Int32[]类型

另外原有后端代码的空catch块会直接吞掉所有异常，就算执行出错也看不到任何报错日志，不利于排查问题，不建议在生产环境使用这种写法。

两种方案二选一即可，优先推荐改前端，改动量最小。

方案1：修改前端service.ts（无需动后端） #

不要直接用set方法传数组，逐个追加同名参数，生成后端能识别的Query格式：

public deleteMulipleDevices(deviceIds: number[]): Observable<any> {
  let params = new HttpParams();
  // 逐个追加同名参数
  deviceIds.forEach(id => {
    params = params.append('deviceIds', id.toString());
  });
  return this.http.delete(this.baseUrl + 'device', { params });
}

Angular 12+ 版本可以用更简洁的写法，新版本默认会把数组序列化为同名多参数的格式：

public deleteMulipleDevices(deviceIds: number[]): Observable<any> {
  const params = new HttpParams({
    fromObject: { deviceIds: deviceIds.map(String) }
  });
  return this.http.delete(this.baseUrl + 'device', { params });
}

方案2：修改后端Controller.cs（适配前端原有传参格式） #

如果不想调整前端代码，可以直接修改后端参数接收逻辑，手动解析逗号分隔的ID字符串，不需要写自定义模型绑定器，改动量极小：

[HttpDelete]
public IActionResult DeleteMulipleDevice([FromQuery] string deviceIds)
{
    try
    {
        // 将前端传来的逗号分隔ID字符串拆分为int数组
        var idArray = deviceIds.Split(',', StringSplitOptions.RemoveEmptyEntries)
            .Select(int.Parse)
            .ToArray();
        var toDelete = _frontLineContext.Devices
            .Where(d => idArray.Contains(d.Id))
            .ToList();
        _frontLineContext.Devices.RemoveRange(toDelete);
        _frontLineContext.SaveChanges();
        return Ok($"成功删除{toDelete.Count}条记录");
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"批量删除失败：{ex.Message}");
    }
}

修改完成后打开浏览器网络面板查看删除请求的URL：

• 后端用int[]接收参数时，正确参数格式为 /device?deviceIds=1&deviceIds=2&deviceIds=3&deviceIds=4
• 后端用string接收手动拆分时，参数格式为 /device?deviceIds=1,2,3,4 即可正常识别

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