Angular11对接.NET Core3.1 WebAPI传多选值报400错误如何解决

报错根因 #

• URL中出现[object Object]是因为你给CreateSiteUsersAsync传入的第二个参数data.siteCode是多选下拉框返回的对象数组，直接拼接进URL时会调用toString()转为[object Object]格式，完全不符合后端路由要求的number类型参数规则，所以触发400错误。
• 存在隐藏问题：你的service方法要求第一个入参是FormData类型，但业务代码里传的是普通JSON对象，参数类型不匹配也会导致后端接收参数失败。

修复方案 #

场景1：后端要求路由参数仅传递单个站点ID #

如果多选下拉框仅允许最终提交单个站点，或需要遍历多选结果逐个提交：

1. 先从多选返回的对象数组里提取需要传递的ID字段，比如你的站点对象结构是{id:number, name:string}，就取对应id属性值
2. 把普通表单对象转为FormData类型，匹配service入参要求

修改后的业务.ts代码：

async onSubmitHandler() {
    const formValue = { ...this.userForm.value};
    // 提取多选对象里的站点ID，替换成你实际的ID字段名
    const siteId = formValue.siteCode[0].id;
    // 构造符合要求的FormData
    const data = new FormData();
    Object.keys(formValue).forEach(key => {
        // 数组/对象类型转成JSON字符串传递，也可以根据后端要求逐个append元素
        if(Array.isArray(formValue[key])) {
            data.append(key, JSON.stringify(formValue[key]));
        } else {
            data.append(key, formValue[key]);
        }
    });
    await this.userService.CreateSiteUsersAsync(data, siteId).toPromise();
}

场景2：后端需要一次性接收多个站点ID #

如果业务要求一次提交多个站点，建议把多站点ID放到请求体传递，不要拼接在URL上：

1. 后端同步修改路由，移除{id}路由参数，从请求体中接收站点ID列表
2. 前端对应调整service逻辑，URL不再拼接id参数

修改后的service.ts代码：

CreateSiteUsersAsync(data: FormData) {
    return this.http.post(`${this.baseUrl}/${this.basePath}/siteUsers`, data);
}

业务代码和上一场景的FormData构造逻辑一致，直接把多选的siteCode数组转成JSON字符串放入FormData提交即可。

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