Angular 11 POST method won't POST query parameters

Question

My POST method is supposed to post these query parameters

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

to my web API controller. However, upon posting the request parameters are sent but nothing it received. Why might this be the case?

Component File for Post Method

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);
    });
  }
}

Controller File

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);
        }
    }
}

Object File

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

The HttpParams object is immutable thus one solution to solve this is to declare your params variable like this =>

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