Angular 11 Forms and Http POST

Question

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

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

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

HTML文件

<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>

Answer 1

在上调试

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

并检查this.weatherForm.value的值

所有属性都区分大小写温度C不等于气温C

如果你执行undefine.toString()，那么你会得到错误的

Answer 2

请将您的代码替换为以下

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