"ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6

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 throw "ERROR TypeError: Cannot read 属性 'name' of undefined"加载我的 angular 初始加载时出错。

Answer 1

Cannot read property 'name' of undefined”

表示某些对名称的引用是错误的。您的代码中只有一个：employeeService?.selectedEmployee.name，因此 employeeService?.selectedEmployee 是 undefined。

修复

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

Answer 2

试试这个。

<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee?.name" placeholder="Enter full name" required>

在 selectedEmplyee 之后再添加一个 ?。它会解决问题。

错误原因是应用程序启动时selectedEmplyee in employeeService未定义。因此，请确保该变量不是 undefined.

Answer 3

添加 Safe Navigation Operator ( ?. ) 因为 employeeService?.selectedEmployee 未定义

Stackblitz demo

component.html

<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee.name" placeholder="Enter full name" required>

component.ts

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

Answer 4

您需要实例化 employeeService.selectedEmployee 对象，这样它就不会未定义在构造函数或 ngOnInit() 中实例化该对象，并且您不能在 ngModel[=11 中使用安全导航运算符 (?.) =]

例如：

 ngOnInit(){
this.employeeService.selectedEmployee=new Employee ();
    }

Answer 5

@Krishna Rathore Screenshot of StackBlitz

"ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6

"ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6

javascript

node.js

typescript

mean-stack

angular

修复