類型錯誤：無法讀取未定義的 angular7 的屬性“_id”

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>

或者用 Injection 再傳一遍。 目前，問題是您的 EmployeeComponent 不能像您想要的那樣定位（從 html 傳遞到服務變量），所以您得到 -未定義錯誤。

Answer 2

最初，當加載組件時， employee.service沒有為selectedEmployee設置值。 呈現 html 並且[(ngModel)]="employeeservice.selectedEmployee._id"期望值為employeeservice.selectedEmployee._id 。 但是employeeservice.selectedEmployee尚未初始化，因此出現錯誤。

如果您沒有設置employeeservice.selectedEmployee._id ，我建議您使用默認的 _id 。

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

Answer 3

正如錯誤所說：您想訪問 _id 但selectedEmployee從未真正定義過。

您可以僅在 html 元素上使用*ngIf定義該元素時才顯示該元素，或者為其提供默認值，例如selectedEmployee: Employee = {} （相應地設置類所需的任何變量）

Answer 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() { }
 }