angular - 从Angular Post请求获取参数到Spring作为对象，而不是字符串

Question

我正在做一个应用程序，通过 POST 请求将巨大的 Angular 反应形式发送回 SpringBoot API。我的问题是我可以将正文响应参数作为字符串获取，但不能作为对象获取。

角

html

<div class="container-fluid">
<div class="form-control col-md-12">
<form class="form-group" (ngSubmit)="sendSurvey()" [formGroup]="customQuestionForm">
  <div formArrayName="questionArray"
  *ngFor=" let question of questionArray.controls;let i=index">
    <div class="form-group" [formGroupName]="i">
      <div class="form-group ">
        <label>{{question.value.body}}</label>
        <label name="mandatory"></label>
        <textarea class="form-control" id ="{{'question '+i+' body'}}" formControlName="questionResponse"></textarea>
      </div>
  </div>
  </div>
  <button class="btn btn-primary"
          style="width:80px;"
          type="submit">Submit </button>
</form>
</div>
</div>

组件.ts

@Component({
  selector: 'app-reactv-account-form',
  templateUrl: './reactv-account-form.component.html',
  styleUrls: ['./reactv-account-form.component.css']
})
export class ReactvAccountFormComponent implements OnInit {

  customQuestionForm!: FormGroup;
  questionnaire!: Questionnaire
  constructor(private fb : FormBuilder, private hTTPCommunicationService: HTTPCommunicationService) { }

  get questionArray (): FormArray{
    return <FormArray>this.customQuestionForm.get('questionArray')
  }

  ngOnInit(): void {
    this.customQuestionForm= this.fb.group({
      questionArray: this.fb.array([])
    })
    this.getQuestions()
  }
[...] // par of ts for display
  //################################## Http Communication #####################################"
  getQuestions(): void{
    this.hTTPCommunicationService.getQuestions()
      .subscribe({
        next:(questionArray:Question[])=>(this.displayQuestions(questionArray), Validators.required)
      })
  }

  sendSurvey(){
    if (this.customQuestionForm.valid){
      if (this.customQuestionForm.dirty){
        this.questionnaire={...this.questionnaire, ...this.customQuestionForm.value} // this array is injected from the form

// those values are set for testing
        this.questionnaire.id=1
        this.questionnaire.creationTimeStamp = new Date();
        this.questionnaire.user_id= "MyUserId";
        this.questionnaire.ownerAdvice=true;
        this.questionnaire.managerAdvice=true;
        this.questionnaire.finalAdvice=true;
        this.questionnaire.isSubmitedForm=true
//end of testing values injection

        this.hTTPCommunicationService.sendUserDemandToServer(this.questionnaire)
          .subscribe({
            next:()=>this.customQuestionForm.reset()
          })
      }
    }
  }
}

春天

RestController 类

@RestController
public class EndPointsManager {
[...] //other part of the class

    @CrossOrigin(origins="http://localhost:4200/")
    @RequestMapping(method=RequestMethod.POST, value="/sendSurvey")
    @ResponseBody   
    public boolean receivingSurvey(final HttpServletRequest request,FrontEndAccessForm newSurvey) {
        this.emptySurveyService.createAccessDemande(newSurvey); // new Survey parametters are all as initialisation values, not request sent ones.
        return true;        
    }
// But if i use 
//public boolean receivingSurvey(@RequestBody String fullBody) {
//i can see the sent datas

数据对象

前端访问表单

public class FrontEndAccessForm {
    int id;
    LocalDateTime creationTimeStamp;
    String user_id; 
    List<FrontEndQuestions> questionArray;
    boolean ownerAdvice; 
    boolean managerAdvice;
    boolean finalAdvice; 
    boolean isSubmitedForm; 
    
    public FrontEndAccessForm(List<FrontEndQuestions> questionArray,int id, LocalDateTime creationTimeStamp,String user_id, 
            boolean ownerAdvice, boolean managerAdvice , boolean finalAdvice,  boolean isSubmitedForm 
            ) {
        super();
        this.id = id;
        this.creationTimeStamp = creationTimeStamp;
        this.user_id = user_id;
        this.questionArray = questionArray;
        this.ownerAdvice = ownerAdvice;
        this.managerAdvice = managerAdvice;
        this.finalAdvice = finalAdvice;
        this.isSubmitedForm = isSubmitedForm;
    }
    public FrontEndAccessForm() {
        super();
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public LocalDateTime getCreationTimeStamp() {
        return creationTimeStamp;
    }
    public void setCreationTimeStamp(LocalDateTime creationTimeStamp) {
        this.creationTimeStamp = creationTimeStamp;
    }
    public String getUser_id() {
        return user_id;
    }
    public void setUser_id(String user_id) {
        this.user_id = user_id;
    }
    public List<FrontEndQuestions> getQuestionArray() {
        return questionArray;
    }
    public void setQuestionArray(List<FrontEndQuestions> questionList) {
        this.questionArray = questionList;
    }
    public boolean isOwnerAdvice() {
        return ownerAdvice;
    }
    public void setOwnerAdvice(boolean ownerAdvice) {
        this.ownerAdvice = ownerAdvice;
    }
    public boolean isManagerAdvice() {
        return managerAdvice;
    }
    public void setManagerAdvice(boolean managerAdvice) {
        this.managerAdvice = managerAdvice;
    }
    public boolean isFinalAdvice() {
        return finalAdvice;
    }
    public void setFinalAdvice(boolean finalAdvice) {
        this.finalAdvice = finalAdvice;
    }
    public boolean isSubmitedForm() {
        return isSubmitedForm;
    }
    public void setSubmitedForm(boolean isSubmitedForm) {
        this.isSubmitedForm = isSubmitedForm;
    }   
}

前端问题

public class FrontEndQuestions {
    int id;
    String body;
    boolean mandatoryStatus;
    String questionResponse;    
    
    public FrontEndQuestions() {
        super();
    }
    
    public FrontEndQuestions(String body, int id,  boolean mandatoryStatus, String questionResponse) {
        super();
        this.id = id;
        this.body = body;
        this.mandatoryStatus = mandatoryStatus;
        this.questionResponse = questionResponse;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getBody() {
        return body;
    }
    public void setBody(String body) {
        this.body = body;
    }
    public boolean isMandatoryStatus() {
        return mandatoryStatus;
    }
    public void setMandatoryStatus(boolean mandatoryStatus) {
        this.mandatoryStatus = mandatoryStatus;
    }
    public String getQuestionResponse() {
        return questionResponse;
    }
    public void setQuestionResponse(String questionResponse) {
        this.questionResponse = questionResponse;
    }   
}

知道我错在哪里了吗？

解决方案编辑

如果它可以帮助任何人，我找到了解决方案，我有多个错误：

在 ts 文件中，我没有将数据作为 JSON 返回，我在 HttpCommunicationService 中进行了如下编辑：

getQuestions():Observable<Question[]>{
    const url="http://localhost:8080/completeSurvey"
    return this.httpModule.get<Question[]>(url)
      .pipe(
        tap(data =>console.log(' ############### getQuestions:'+JSON.stringify(data)))
      )
  }

弹簧误区：

我也必须改变我的后端功能，如下所示

@CrossOrigin(origins="http://localhost:4200/")
    @RequestMapping(value="/sendSurvey")
    @PostMapping(
            consumes = {MediaType.APPLICATION_JSON_VALUE, MediaType.APPLICATION_XML_VALUE}
            )
    public void receivingSurvey(@RequestBody FrontEndAccessForm newAccessDemand) {
        this.emptySurveyService.createAccessDemande(newAccessDemand);       
    }

这是拯救我一天的博客的链接 https://www.appsdeveloperblog.com/postmapping-requestbody-spring-mvc/

标签： angularspring-boothttp-post