Question

您好，我正在尝试使用Angular 7提交仅具有一个字段的表单，但是在输入行中遇到此错误：

错误TypeError：无法读取未定义的属性“名称”

我的HTML看起来像这样：

    <form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
    <input type="hidden" name="Id" [value]="service.formData.Id">
    <div class="form-group" >
        <div class="input-group" *ngIf="service">
            <div class="input-group-prepend">
                <div class="input-group-text bg.white">
                        <i class="fas fa-user" [class.green-icon]="Name.valid" [class.red-icon]="Name.invalid && Name.touched"></i>
                </div>
            </div>
            <input name="Name" #Name="ngModel" [(ngModel)]="service.formData.Name" class="form-control" placeholder="Student Name" required maxlength="50">
        </div>
    </div>
    <hr>
    <div class="form-group">
        <button class="btn btn-success btn-lg btn-block" type="submit"><i class="fas fa-database"></i> Submit</button>
    </div>
</form>

我有一个看起来像这样的组件：

import { Component, OnInit } from '@angular/core';
import { StudentDetailService } from 'src/app/shared/student-detail.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-student-detail',
  templateUrl: './student-detail.component.html',
  styles: []
})
export class StudentDetailComponent implements OnInit {

  constructor(private service:StudentDetailService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?:NgForm)
  {
    if(form !=null){
      form.resetForm();
      this.service.formData = {
        Id :0,
        Name :'',
        StudentSubjects :null
      }
    }

  }

  onSubmit(form:NgForm)
  {
    this.service.postStudentDetail(form.value).subscribe(
      res => {
        this.resetForm(form);
      },
      err => {
        console.log(err)
      }
    );
  }
}

还有这样的服务：

import { Injectable } from '@angular/core';
import { StudentDetail } from './student-detail.model';
import {HttpClient} from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class StudentDetailService {
  formData :StudentDetail;
  readonly rootURL = 'http://localhost:31047/api';

  constructor(private http: HttpClient) { }

  postStudentDetail(formData:StudentDetail)
  {
    return this.http.post(this.rootURL+'/StudentDetail',formData)
  }
}

我知道该组件的“服务”变量返回空值，但是当我在ngOnInit()函数中打印时，该值不为空值。我尝试使用*ngIf="service"命令没有成功，所以我不知道为什么显示此错误。有人知道我在做什么错吗？

Answer 1

您正在尝试读取Name的{{1}}属性，该属性为空。

service.formData代替*ngIf="service"
在*nfIf="service.formData"方法中，如果参数不为null，则仅在初始化resetForm。在this.service.formData中，您将调用不带参数的方法，因此formData将不会初始化。您需要先对其进行初始化。

Answer 2

您尚未在组件init上初始化formData对象。

在ngOnInit中的resetForm之前将其初始化，您的错误应该消失了。

ngOnInit() {
this.service.formData = {
        Id :0,
        Name :'',
        StudentSubjects :null
      }
this.resetForm();
}

TypeError：无法读取未定义的属性“名称”。角度7

2 个答案: