【问题标题】："ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6Angular 6中的“错误类型错误：无法读取未定义的属性'名称'”
【发布时间】：2019-02-09 02:21:43
【问题描述】：

这是我的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: Cannot read property 'name' of undefined” 在加载我的角度初始加载时出现错误。

【问题讨论】：

把if (form)改成if (true)看看错误是否消失

标签： javascript node.js angular typescript mean-stack

【解决方案1】：

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

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

修复

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

【讨论】：

我试过这个，但它最初会抛出错误 => 解析器错误：'?.'运算符不能用于 @10:61 中 [employeeService?.selectedEmployee?._id=$event] 的第 40 列的赋值中

【解决方案2】：

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

【讨论】：

我试过这个，但不允许这样做并抛出错误 => 解析器错误：'?.'运算符不能用于 @10:61 中 [employeeService?.selectedEmployee?._id=$event] 的第 40 列的赋值中
StackBlitz 演示也无法正常工作...我已在评论部分附上了下面的 ss。

【解决方案3】：

试试这个。

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

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

错误的原因是应用程序启动时selectedEmplyee 中的employeeService 未定义。所以请确保该变量不是undefined。

【讨论】：

我试过这个，但它最初会抛出错误 => 解析器错误：'?.'运算符不能用于 @10:61 中 [employeeService?.selectedEmployee?._id=$event] 的第 40 列的赋值中

【解决方案4】：

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

例如：

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

【讨论】：

【解决方案5】：

@Krishna Rathore Screenshot of StackBlitz

【讨论】：