如何将Angular表单数据投递到服务器接受的POST请求中？

Question

需要找到一种方法，将数据发送到服务器接受的表单中。正在发送标题和描述，但没有发送评分。会有两个以上的评级类型。

需要满足的服务器的POST请求体例。

{
    "title": "Test title",
    "description": "Test description",
    "ratings": [
        {
            "value": 2,
            "category": {
                "name": "difficulty"
            }
        },
        {
            "value": 5,
            "category": {
                "name": "story"
            }
        }
    ]
}

Angular组件.ts使用FormBuilder制作的评论表单。用户输入1-10分的分数进行评分。

ngOnInit() {
  this.reviewForm = this.fb.group({
    gameTitle: ['', []],
    gameDescription: ['', []],

    scores: this.fb.group({
      difficulty: [, []],
      story: [, []]
    })
  })
}

Angular组件.ts通过服务提交表单数据。

onSubmit() {
  this.gameService.postReview(this.reviewForm.value)
    .subscribe(() => {
      this.success = true;
    });
}

Angular API service.ts将数据发布到服务器。我如何把评分数据投到下面，让服务器接受它。以及如何获取评分对象中的分数值和名称。

postReview(reviewData: any) {

  const gameReview = {

    title: reviewData.gameTitle,
    description: reviewData.gameDescription,

    ratings: [{
      value: reviewData.scores.value,
      category: {
        name: reviewData.scores.key
      }
    }]
  };

  return this.http.post(this.API_URL, gameReview, httpOptions);
}

Answer 1

你的http帖子看起来有点奇怪，甚至没有包含头。http帖子看起来是这样的。

        var headers = new HttpHeaders({"Content-Type": "application/json" });
        this.http.post<LogAnswer>(url,
            {
                gameReview //your json Object
            },
            {
                headers  //your headers, depending on you backend you may include some
                         //more properties
            }
        ).subscribe(
            (val) => {
                //maybe get a token back from your backend
                console.log("it worked")
            },
            (error) => {
                console.log("didnt work");

            }
        );

此外，我建议你使用postman 如果你想检查你的api是否真的工作，也许哪些头信息也要发送。让我知道它是否有效