Ошибка типа: невозможно прочитать свойство '_id' неопределенного angular7

Question

У меня есть компонент сотрудник Я пытаюсь создать форму, для которой я создал «компонент сотрудника», «служба сотрудника» и «модель сотрудника»

В 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)

Я пропускаю какие-либо операции импорта, в которых нуждается форма, или в чем может быть ошибка. Я новичок и пытаюсь учиться на угловых. Я гуглил решение, но не смог найти подходящего решения. Пожалуйста, помогите мне

Answer 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>

Или передайте это снова с помощью инъекции. На данный момент проблема заключается в том, что ваш EmployeeComponent не может нацеливаться так, как вы хотите (переход от html к служебной переменной), поэтому вы получаете - Undefined error.

Answer 2

Как гласит ошибка: вы хотите получить доступ к _id, но selectedEmployee фактически никогда не определяется.

Вы можете либо отобразить элемент, только если он был определен с помощью *ngIf в вашем HTML-элементе, либо присвоить ему значение по умолчанию, например selectedEmployee : Employee = {} (соответственно, установить любую переменную из класса)

Answer 3

Первоначально, когда компонент загружен, employee.service не имеет значения, установленного для selectedEmployee. HTML отображается, и [(ngModel)]="employeeservice.selectedEmployee._id" ожидает значение employeeservice.selectedEmployee._id. Но employeeservice.selectedEmployee еще не инициализирован, поэтому ошибка.

Я бы предложил вам использовать _id по умолчанию, если вы не установили employeeservice.selectedEmployee._id.

Для этого используйте [(ngModel)]="employeeservice.selectedEmployee ? employeeservice.selectedEmployee._id : 0"