TypeError：无法读取未定义 angular7 的属性“_id”答案

【问题标题】：TypeError: Cannot read property '_id' of undefined angular7TypeError：无法读取未定义 angular7 的属性“_id”
【发布时间】：2019-09-13 15:10:58
【问题描述】：

我有一个组件员工我正在尝试创建一个表单，为此我创建了“员工组件”、“员工服务”和“员工模型”

在employee.component.html 我有下面的表格

 <form #employeeform="ngForm" (ngSubmit)="onSubmit(employeeform)">
          <input type="hidden" name="_id"  [(ngModel)]="employeeservice.selectedEmployee._id" #_id="ngModel"/>
        </form>

在employee.component.ts 我有以下代码

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

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

 export class EmployeeComponent implements OnInit {
    constructor(private employeeservice : EmployeeService) { }
      ngOnInit() {
      }
   }

这是我在员工组件中导入的employee.service.ts 文件

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Employee } from './employee.model';

 @Injectable({
   providedIn: 'root'
 })
 export class EmployeeService {
   selectedEmployee : Employee;
   employees: Employee[];

   constructor() { }
 }

这是我在员工服务中导入的employee.model.ts

 export class Employee {
     _id: string;
     name: string;
     position : string;
     office : string;
     salary : number;
 }

当我运行命令“ng serve”时，我在浏览器控制台中收到以下错误

 EmployeeComponent.html:9 ERROR TypeError: Cannot read property '_id' of undefined
at Object.eval [as updateDirectives] (EmployeeComponent.html:9)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)
at checkAndUpdateView (core.js:23313)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)
at checkAndUpdateView (core.js:23313)

我是否遗漏了表单需要的任何导入，或者可能是什么错误。我是一个初学者并试图学习角度。我已经搜索了解决方案，但找不到任何相关的解决方案。请帮帮我

【问题讨论】：

标签： angular angular7 angular-services angular-ngmodel angular-forms

【解决方案1】：

我建议您在 EmployeeComponent 中创建员工的实例，并且每次打开组件时 - 从服务中检索它并将其定位到 html 代码。比如：

export class EmployeeComponent implements OnInit {
    employee: Employee;

    constructor(private employeeservice : EmployeeService) { 
      this.employee = employeeservice.getSelectedEmployee();
    }
      ngOnInit() {
      }
   }

以及稍后在 html 中：

 <form #employeeform="ngForm" (ngSubmit)="onSubmit(employeeform)">
          <input type="hidden" name="_id"  [(ngModel)]="employee._id" #_id="ngModel"/>
        </form>

或者使用 Injection 再次传递。目前，问题是您的 EmployeeComponent 不能像您想要的那样定位（从 html 传递到服务变量），所以您得到 - Undefined 错误。

【讨论】：

我做了以下更改 export class EmployeeComponent implements OnInit { public employee;构造函数（私有员工服务：员工服务）{ this.employee = employeeservice.selectedEmployee; } ngOnInit() { } } 我仍然遇到同样的错误
但是在您的服务内部（导出类 EmployeeService），您有数据输入吗？如果不是 - 您还需要在构造函数中创建 Employee（就像其他人建议的那样）。但通常在服务中 - 您从某处检索数据（REST 调用或其他......）

【解决方案2】：

正如错误所说：您想访问 _id 但实际上从未定义过selectedEmployee。

您可以只显示在您的html元素上使用*ngIf定义的元素，或者给它一个默认值，如selectedEmployee : Employee = {}（相应地设置类所需的任何变量）

【讨论】：

【解决方案3】：

最初，当组件被加载时，employee.service 没有为selectedEmployee 设置值。 html 被渲染，[(ngModel)]="employeeservice.selectedEmployee._id" 期望值为employeeservice.selectedEmployee._id。但是employeeservice.selectedEmployee 还没有初始化，所以报错。

如果您没有设置employeeservice.selectedEmployee._id，我建议您使用默认_id。

为此使用[(ngModel)]="employeeservice.selectedEmployee ? employeeservice.selectedEmployee._id : 0"

【讨论】：

【解决方案4】：

您的 employee.service.ts 文件应该是这样的。

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Employee } from './employee.model';

 @Injectable({
   providedIn: 'root'
 })
 export class EmployeeService {
     selectedEmployee: Employee = {    
    _id: '',
    name: '',
    position: '',
    office: '',
    salary: null
  };
   employees: Employee[];

   constructor() { }
 }

【讨论】：