时间戳

首页 > 解决方案 > Angular 11 表单和 Http POST

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

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

标签： htmlangularformspost

解决方案

调试在

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()然后你会得到错误

推荐阅读