页面加载时出现Chrome错误“ERROR TypeError：无法读取未定义的属性'name'

Question

这是我的employee.component.html

<div class="row">
  <div class="input-field col s12">
    <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee.name" placeholder="Enter full name"
      required>
    <label>Name :
      <label class="red-text">*</label>
    </label>
  </div>
</div>

下面是employee.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee.model';


@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css'],
  providers: [EmployeeService]
})
export class EmployeeComponent implements OnInit {

  constructor(public employeeService: EmployeeService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();
      this.employeeService.selectedEmployee = {
        name: '',
        position: '',
        office: '',
        salary: null
      };
    }
  }

}

Chrome浏览器彻底“加载页面时出现”ERROR TypeError：无法读取未定义的属性'名称'错误。我尝试了很多其他资源，不知道如何解决这个问题。

Answer 1

添加qazxsw poi因为qazxsw poi undefined

Safe Navigation Operator ( ?. )

component.html

employeeService?.selectedEmployee

component.ts

Stackblitz demo

Answer 2

无法读取未定义的属性“名称”

意味着某些引用名称是错误的。你的代码中只有一个：<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee.name" placeholder="Enter full name" required> ，因此

import { Component,ViewChild } from '@angular/core';
import { EmployeeService } from './employee.service';
import {NgForm} from '@angular/forms';

@ViewChild('myForm') myForm:any;
  constructor(public employeeService: EmployeeService) { }

  ngOnInit() {
    this.resetForm(this.myForm);
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();
      this.employeeService.selectedEmployee = {
        name: '',
        position: '',
        office: '',
        salary: null
      };
    }
  }

是employeeService?.selectedEmployee.name。

Fix

确保employeeService?.selectedEmployee未定义，或使用安全导航undefined

Answer 3

试试这个。

selectedEmployee

在selectedEmplyee之后添加另一个employeeService?.selectedEmployee?.name。它将解决问题。

错误的原因是应用程序启动时<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee?.name" placeholder="Enter full name" required> 中的?未定义。因此，请确保变量未定义。

Answer 4

您需要实例化employeeService.selectedEmployee对象，以便它不会被定义在构造函数或ngOnInit（）中实例化对象，并且您不能在ngModel中使用安全导航操作符（？。）

例如：

selectedEmplyee

Answer 5

@Krishna Rathore employeeService