Angular 11 POST 方法 URL 查询字符串

Question

无论如何，这是我第一次使用 HTTP 方法。我想发出 POST 请求，将这四个变量和值传递给我的 API。

date: number;
temperatureC: number;
temperatureF: number;
summary: string;

我知道我可以在 POST 方法中像 https://localhost:30233/WeatherForecast?date=13&temperatureC=4&temperatureF=23&summary=nice 这样简单地写出查询字符串，这样就可以了。但我知道这不是很有效也不是模块化的。使用 POST 方法传递查询字符串是否有更好的方法？

到目前为止，这就是我所拥有的。其中包含一个 POST 方法，没有传递任何信息。

import { Component, Inject, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';


@Component({
  selector: 'app-WeatherData',
  templateUrl: './AddWeatherData.component.html',

})


export class PostDataComponent {
  baseUrl: string;
  date: number;
  temperatureC: number;
  temperatureF: number;
  summary: string;
  
  

  constructor(public http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.baseUrl = "https://localhost:30233/WeatherForecast";
  }

  CreateData(postData) {

    let endPoints = ""
    this.http.post(this.baseUrl + endPoints, postData).subscribe(data => {
      console.log(data);

    });

  }
}

POST 来自我的控制器的方法

[HttpPost]
        public String Post(Int32 Date, Int32 TemperatureC, Int32 TemperatureF, String Summary)
        {
            {
                Posted = (Date, TemperatureC, TemperatureF, Summary);
                return Posted.ToString();
            }
        }

更新： 我认为我的控制器现在是问题所在？在更改我的代码以适应 POST 方法后，我现在收到此错误。

{error: SyntaxError: Unexpected token ( in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "(0, 0, 0, )"

我该如何解决这个问题？

Answer 1

params = {
date: number;
temperatureC: number;
temperatureF: number;
summary: string;
}

this.http.post(this.baseUrl , { params}).subscribe(data => {
      console.log(data);

});

Answer 2

如果我没记错的话，@angular/common/http 中有一个名为 HttpParams 的方法可以帮助构建参数对象。准备就绪后，您可以按照 Sanjay 的说明传递它们。

const params = new HttpParams()
  .set('page', PageNo)
  .set('sort', SortOn);

return this.http.post(this.baseURL + endpoints, {params})

Angular 11 POST 方法 URL 查询字符串

Angular 11 POST Method URL Query String

angular

http-post

query-string