«ERROR TypeError: Невозможно прочесть имя свойства undefined» в Angular 6
Это мой employee.component.html
<div class = "row">
<div class = "input-field col s12">
<input type = "text" name = "name" #name = "ngModel" [(ngModel)] = "employeeService?.selectedEmployee.name" placeholder = "Enter full name"
required>
<label>Name :
<label class = "red-text">*</label>
</label>
</div>
</div>
Ниже один - employee.component.ts.
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee.model';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css'],
providers: [EmployeeService]
})
export class EmployeeComponent implements OnInit {
constructor(public employeeService: EmployeeService) { }
ngOnInit() {
this.resetForm();
}
resetForm(form?: NgForm) {
if (form) {
form.reset();
this.employeeService.selectedEmployee = {
name: '',
position: '',
office: '',
salary: null
};
}
}
}
Chrome выдает ошибку "ERROR TypeError: Невозможно прочитать имя свойства неопределенного" при загрузке моей начальной загрузки angular.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Cannot read property 'name' of undefined”
Означает, что некоторая ссылка на имя неверна. В вашем коде только один: employeeService?.selectedEmployee.name, поэтому employeeService?.selectedEmployee - это undefined.
Исправить
Убедитесь, что selectedEmployee не является неопределенным, или используйте безопасную навигацию employeeService?.selectedEmployee?.name
Я пробовал это, но сначала выдает ошибку => Ошибка парсера: знак '?.' оператор не может использоваться в назначении в столбце 40 в [employeeService? .selectedEmployee? ._ id = $ event] в @ 10: 61
Попробуй это.
<input type = "text" name = "name" #name = "ngModel" [(ngModel)] = "employeeService?.selectedEmployee?.name" placeholder = "Enter full name" required>
Добавьте еще один ? после selectedEmplyee. Это решит проблему.
Причина ошибки при запуске приложения selectedEmplyee в employeeService не определена. Поэтому убедитесь, что переменная не неопределенный.
Я пробовал это, но сначала выдает ошибку => Ошибка парсера: знак '?.' оператор не может использоваться в назначении в столбце 40 в [employeeService? .selectedEmployee? ._ id = $ event] в @ 10: 61
добавить Safe Navigation Operator ( ?. ) из-за employeeService?.selectedEmployee undefined
component.html
<input type = "text" name = "name" #name = "ngModel" [(ngModel)] = "employeeService?.selectedEmployee.name" placeholder = "Enter full name" required>
component.ts
import { Component,ViewChild } from '@angular/core';
import { EmployeeService } from './employee.service';
import {NgForm} from '@angular/forms';
@ViewChild('myForm') myForm:any;
constructor(public employeeService: EmployeeService) { }
ngOnInit() {
this.resetForm(this.myForm);
}
resetForm(form?: NgForm) {
if (form) {
form.reset();
this.employeeService.selectedEmployee = {
name: '',
position: '',
office: '',
salary: null
};
}
}
Я пробовал это, но не позволяет и выдает ошибку => Ошибка парсера: знак '?.' оператор не может использоваться в назначении в столбце 40 в [employeeService? .selectedEmployee? ._ id = $ event] в @ 10: 61
Демо StackBlitz также не работает ... я прикрепил ss ниже здесь, в разделе комментариев.
вам нужно создать экземпляр объекта employeeService.selectedEmployee, чтобы он не был неопределенным, чтобы создать экземпляр объекта в конструкторе или ngOnInit (), и вы не можете использовать оператор безопасной навигации (?.) в ngModel
например:
ngOnInit(){
this.employeeService.selectedEmployee=new Employee ();
}
@Krishna Rathore Скриншот StackBlitz
замените
if (form)наif (true)и посмотрите, исчезла ли ошибка