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

如何解决Angular 11 POST 方法不会 POST 查询参数

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

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

到我的 Web API 控制器。但是，在发布请求参数时发送但没有收到任何内容。为什么会这样？

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,string summary)
        {
            Date = date;
            TemperatureC = temperatureC;
            Summary = summary; 
        }
    }
}

解决方法

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

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