Question

我无法将FormGroup对象的数组发送到后端。

错误：它表示："Unsupported Media Type" "Content type 'text/plain;charset=UTF-8' not supported"错误415。

以前，它无法将数组反序列化到后端的Java对象中，因为它不是JSON格式，现在我受此困扰。

我尝试使用JSON.stringify(arrayOfFormGroups)将其转换为JSON，但是我不知道为什么它说我正在发送plain/text。

此代码为您提供内容类型错误。

TS

// Inserts all the form data into one array
let dataArray: String[] = [this.form1.value, this.form2.value, this.form3.value, this.form4.value];

// Send the form data to the service, which then sends the data to the server (Spring-Boot)
this.data.sendFormData(JSON.stringify(dataArray)).subscribe(
      response => console.log("Success! ", response),
      error => console.error("Error: ", error)
    );
}

此代码使数组无法反序列化以供后端使用。

TS

// Inserts all the form data into one array
let dataArray: String[] = [this.form1.value, this.form2.value, this.form3.value, this.form4.value];

// Send the form data to the service, which then sends the data to the server (Spring-Boot)
this.data.sendFormData(dataArray).subscribe(
      response => console.log("Success! ", response),
      error => console.error("Error: ", error)
    );
}

服务

sendFormData(userData) {
   return this.http.post<any>("http://localhost:8080/create", userData);
}

期望

我想将FormGroups数组作为JSON字符串发布到我的后端。

实际

即使我正在发送JSON，我仍不支持的content-type plain/text发布时出错。

Answer 1

解决方案是将数据存储到对象而不是数组中。原因是，如果仅使用一个对象，则无法将JSON数组发送到后端。它们不兼容。

TS

 // User object
  private user = {
    firstName: String,
    lastName: String
 };

....

// Populates the user object
this.user.firstName = this.form1.controls['firstName'].value;
this.user.lastName = this.form2.controls['lastName'].value;

// Sends the form data to the service
this.data.sendFormData(JSON.stringify(this.user)).subscribe(
   response => console.log("Success! ", response),
   error => console.error("Error: ", error)
);

我正在使用多个表单组，因为我在线性模式下使用Angular材质的步进器，这需要每个步骤都有自己的FormGroup。

更多信息：https://material.angular.io/components/stepper/overview#linear-stepper

此外，我还必须在POST中添加标题：

我的服务

private header = new HttpHeaders({ 'content-type': 'application/json' });

constructor(private http: HttpClient) { }

ngOnInit() { }

sendFormData(userData) {
  return this.http.post("http://localhost:8080/createAccount", userData, { headers: this.header });
}

擅长将对象从JSON VS数组转换为JSON： https://alligator.io/js/json-parse-stringify/

通过POST发送对象数组不起作用-Angular

1 个答案: