Angular如何向Spring Boot后端发送数组类型的属性参数

问题根源 #

• 当前代码直接传递单个id值作为请求体，未封装为后端要求的{value: [数组]}结构
• 若业务需要批量提交所有选择的id，无需在循环内逐个发送请求

代码调整（批量提交场景，推荐） #

一次性提交所有选中的id，符合常规批量操作逻辑：

setValueForTest() {
  // 获取表单选中的id数组
  this.personArray = this.form.controls.selectBox.value;
  // 构造符合后端要求的请求体
  const requestBody = {
    value: this.personArray
  };
  // 单次发送请求
  this.api.setValueForPerson({
    body: requestBody
  }).subscribe(response => {
    console.log(response);
  });
}

代码调整（逐个提交场景） #

如果业务逻辑要求必须逐个发送每个id，按如下调整循环内的传参结构即可：

setValueForTest() {
  this.personArray = this.form.controls.selectBox.value;
  this.personArray.forEach((id) => {
    // 单个id也包裹为数组，符合后端字段要求
    const requestBody = {
      value: [id]
    };
    this.api.setValueForPerson({
      body: requestBody
    }).subscribe(response => {
      console.log(response);
    });
  });
}

类型适配调整 #

你当前定义的Person类型属性为id: Array，和后端要求的接收字段value不匹配，可调整Person类型定义：

interface Person {
  value: Array<any> // 替换原有id属性，和后端字段对齐
}

调整后传参时可直接声明requestBody: Person获得类型提示。

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