J'ai un employé de composant J'essaie de créer un formulaire, pour lequel j'ai créé "composant employé", "service employé" et "modèle employé"
Dans employee.component.html j'ai le formulaire ci-dessous
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)
4 Réponses :
Je vous recommande de créer une instance de l'employé à l'intérieur du EmployeeComponent, et à chaque fois que vous ouvrez le composant - récupérez-le du service et ciblez-le au code html. Quelque chose comme:
<form #employeeform="ngForm" (ngSubmit)="onSubmit(employeeform)">
<input type="hidden" name="_id" [(ngModel)]="employee._id" #_id="ngModel"/>
</form>
et plus tard au html:
export class EmployeeComponent implements OnInit {
employee: Employee;
constructor(private employeeservice : EmployeeService) {
this.employee = employeeservice.getSelectedEmployee();
}
ngOnInit() {
}
}
Ou le repasser avec injection Pour le moment, le problème est que votre EmployeeComponent ne peut pas cibler comme vous le souhaitez (en passant du html à la variable de service), donc vous obtenez une erreur - Undefined .
J'ai fait les changements ci-dessous: la classe d'exportation EmployeeComponent implémente OnInit {employé public; constructeur (service d'employés privé: EmployeeService) {this.employee = Employeeservice.selectedEmployee; } ngOnInit () {}} j'obtiens toujours la même erreur
Mais à l'intérieur de votre service (classe d'exportation EmployeeService), avez-vous des entrées de données? Si non, vous devez également créer l'employé dans le constructeur (comme d'autres le suggèrent). Mais généralement dans le service - vous récupérez les données de quelque part (appel REST ou autre ..)
Initialement, lorsque le composant est chargé, le employee.service n'a pas de valeur définie pour selectedEmployee . Le code HTML est rendu et [(ngModel)] = "Employeeservice.selectedEmployee._id" attend une valeur de Employeeservice.selectedEmployee._id . Mais Employeeservice.selectedEmployee n'est pas encore initialisé, d'où l'erreur.
Je vous suggère d'utiliser un _id par défaut au cas où vous n'auriez pas défini le Employeeservice.selectedEmployee._id .
Pour cela, utilisez [(ngModel)] = "Employeeservice.selectedEmployee? Employeeservice.selectedEmployee._id: 0"
C'est comme le dit l'erreur: vous voulez accéder au _id mais le selectedEmployee n'est jamais réellement défini.
Vous pouvez soit afficher l'élément uniquement lorsqu'il a été défini à l'aide de * ngIf sur votre élément html, soit lui donner une valeur par défaut telle que selectedEmployee: Employee = {} (définissant en conséquence toute variable nécessaire à la classe)
Votre fichier employee.service.ts doit ressembler à ceci.
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() { }
}