Html Angular 11表单和Http POST

我试图发布我从文本框输入的信息，但收到一个错误

core.js:6210 ERROR TypeError: Cannot read property 'toString' of undefined

我想知道为什么我的变量看起来是未定义的？此外，如何解决此问题

组件文件

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

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


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

  constructor(public http: HttpClient, @Inject('BASE_URL') baseUrl: string, private formBuilder: FormBuilder) {
    this.baseUrl = "https://localhost:44347/WeatherForecast";
    this.weatherForm = formBuilder.group({
      Date: new FormControl(),
      TemperatureC: new FormControl(),
      Summary: new FormControl()
    });
  }

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

<form [formGroup]="weatherForm">
  <div class="form-group">
    <label for="inputDate">Date</label>
    <input type="text" class="form-control" id="inputDate" formControlName="Date">
  </div>
  <div class="form-group">
    <label for="inputTemp">Temperature C</label>
    <input type="text" class="form-control" id="inputTemp" formControlName="TemperatureC">
  </div>
  <div class="form-group">
    <label for="inputSummary">Summary</label>
    <input type="text" class="form-control" id="inputSummary" formControlName="Summary">
  </div>
  <button type="submit" class="btn btn-primary" (click)="CreateData()">Add New Weather Data</button>
</form>

我的HTML文件包括表单设置，类型声明是我包含的每个变量的文本。这是一个问题吗

HTML文件

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

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


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

  constructor(public http: HttpClient, @Inject('BASE_URL') baseUrl: string, private formBuilder: FormBuilder) {
    this.baseUrl = "https://localhost:44347/WeatherForecast";
    this.weatherForm = formBuilder.group({
      Date: new FormControl(),
      TemperatureC: new FormControl(),
      Summary: new FormControl()
    });
  }

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

<form [formGroup]="weatherForm">
  <div class="form-group">
    <label for="inputDate">Date</label>
    <input type="text" class="form-control" id="inputDate" formControlName="Date">
  </div>
  <div class="form-group">
    <label for="inputTemp">Temperature C</label>
    <input type="text" class="form-control" id="inputTemp" formControlName="TemperatureC">
  </div>
  <div class="form-group">
    <label for="inputSummary">Summary</label>
    <input type="text" class="form-control" id="inputSummary" formControlName="Summary">
  </div>
  <button type="submit" class="btn btn-primary" (click)="CreateData()">Add New Weather Data</button>
</form>

日期
温度C
总结
添加新的天气数据

在调试时

fromObject: {
        'date': this.weatherForm.value.date.toString(),
        'temperatureC': this.weatherForm.value.temperatureC.toString(),
        'summary': this.weatherForm.value.summary.toString()
      }

并检查

this.weatherForm.value的值

所有属性都区分大小写TemperatureC不等于TemperatureC

如果执行
undefine.toString（）
则会出现错误
请将代码替换为以下内容：

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

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


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

  constructor(public http: HttpClient, @Inject('BASE_URL') baseUrl: string, private formBuilder: FormBuilder) {
    this.baseUrl = "https://localhost:44347/WeatherForecast";
    this.weatherForm = formBuilder.group({
      Date: new FormControl(),
      TemperatureC: new FormControl(),
      Summary: new FormControl()
    });
  }

  CreateData() {
    const params = new HttpParams({
      fromObject: {
        'date': this.weatherForm.value.Date.toString(),
        'temperatureC': this.weatherForm.value.TemperatureC.toString(),
        'summary': this.weatherForm.value.Summary.toString()
      }
    });
    let endPoints = '';
    console.log(params);
    this.http.post(this.baseUrl + endPoints, {},{ params: params }).subscribe(data => {
      console.log(data);
    });
  }
}

日期
，
摘要
，
温度
与
日期
，
摘要
和
温度
不同。外壳很重要。最好对所有对象属性使用一致的驼峰外壳。此外，您可以考虑将整个表单对象与这一.http.PoST（Tas.BaseLL+端点，这个.WerorForm）< /代码>一起发布。这是典型的模式。