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内创建一个employee实例，每次打开该组件时-从服务中检索它并将其定位为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 错误。

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

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

4 个答案: