Angular 11 POST 方法不会 POST 查询参数

Question

我的POST方法应该post这些查询参数

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

到我的网络 API 控制器。但是，在 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;
  summary: string;
  

  constructor(public http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.baseUrl = "https://localhost:44347/WeatherForecast";
    this.date = 21;
    this.temperatureC = 21;
    this.summary = 'good';
  }

  CreateData() {
    const params = new HttpParams()
      .set('date', this.date.toString())
      .set('temperatureC', this.temperatureC.toString())
      .set('summary', this.summary.toString());
    let endPoints = '';
    console.log(params);
    this.http.post(this.baseUrl + endPoints, {params}, {responseType: 'json'}).subscribe(data => {
      console.log(data);
    });
  }
}

控制器文件

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;



namespace PROBLEM.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        private readonly ILogger<WeatherForecastController> _logger;

        public WeatherForecastController(ILogger<WeatherForecastController> logger)
        {
            _logger = logger;
        }

        public (int Date, int TemperatureC, int TemperatureF, string Summary) Posted { get; private set; }

        [HttpGet]
        public IEnumerable<WeatherForecast> Get()
        {
            var rng = new Random();
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            })
            .ToArray();
        }

        [HttpPost]
        public Weather Post(int date, int temperatureC, String summary)
        {
            
            return new Weather(date, temperatureC, summary);
        }
    }
}

对象文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace PROBLEM
{
    public class Weather
    {
        public int Date { get; set; }

        public int TemperatureC { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

        public string Summary { get; set; }

        public Weather(int date, int temperatureC, string summary)
        {
            Date = date;
            TemperatureC = temperatureC;
            Summary = summary; 
        }
    }
}

Answer 1

HttpParams 对象是不可变的，因此解决此问题的一种方法是声明您的像这样的参数变量=>

const params = new HttpParams({fromObject:{'date': this.date.toString(),
      'temperatureC': this.temperatureC.toString(),
      'summary': this.summary.toString()}});

Angular 11 POST 方法不会 POST 查询参数

Angular 11 POST method won't POST query parameters

post

http

query-parameters

asp.net-apicontroller

angular