TypeError: Cannot read property '_id' of undefined angular7
TypeError: Cannot read property '_id' of undefined angular7
我有一个组件员工
我正在尝试创建一个表单,为此我创建了 "employee component"、"employee service" 和 "employee model"
在 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。我用谷歌搜索了解决方案,但找不到任何相关的解决方案。请帮帮我
我建议您在 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 错误。
最初,加载组件时,employee.service
没有为 selectedEmployee
设置值。 html 被呈现,[(ngModel)]="employeeservice.selectedEmployee._id"
期望值为 employeeservice.selectedEmployee._id
。但是 employeeservice.selectedEmployee
尚未初始化,因此出现错误。
我建议您使用默认的 _id,以防您没有设置 employeeservice.selectedEmployee._id
。
为此使用 [(ngModel)]="employeeservice.selectedEmployee ? employeeservice.selectedEmployee._id : 0"
正如错误所说:你想访问 _id 但 selectedEmployee
从未真正定义过。
您可以只显示在 html 元素上使用 *ngIf
定义的元素,或者给它一个默认值,例如 selectedEmployee : Employee = {}
(设置任何需要的变量class 相应地)
你的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() { }
}
我有一个组件员工 我正在尝试创建一个表单,为此我创建了 "employee component"、"employee service" 和 "employee model"
在 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。我用谷歌搜索了解决方案,但找不到任何相关的解决方案。请帮帮我
我建议您在 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 错误。
最初,加载组件时,employee.service
没有为 selectedEmployee
设置值。 html 被呈现,[(ngModel)]="employeeservice.selectedEmployee._id"
期望值为 employeeservice.selectedEmployee._id
。但是 employeeservice.selectedEmployee
尚未初始化,因此出现错误。
我建议您使用默认的 _id,以防您没有设置 employeeservice.selectedEmployee._id
。
为此使用 [(ngModel)]="employeeservice.selectedEmployee ? employeeservice.selectedEmployee._id : 0"
正如错误所说:你想访问 _id 但 selectedEmployee
从未真正定义过。
您可以只显示在 html 元素上使用 *ngIf
定义的元素,或者给它一个默认值,例如 selectedEmployee : Employee = {}
(设置任何需要的变量class 相应地)
你的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() { }
}