I'm attempting to access http://localhost:4200/Personnes/view/:2, but I encountered the following error (ERROR TypeError: Cannot read property 'nom' of undefined)
"My personnnes.service.component.ts"
`export class PersonnesService {
baseUrl='http://localhost/api' ;
personnes: Personne[] = [] ;
constructor(private http:HttpClient) { }
getAll():Observable<Personne[]>{
return this.http.get(`${this.baseUrl}/list`).pipe(
map((res)=>{
this.personnes=res['data'] ;
return this.personnes ;
}),
catchError(this.handleError)) ;
} ;
private handleError(error :HttpErrorResponse){
console.log(error) ;
return throwError('Erreur sur qlq chose.') ;
}
store(personne: Personne): Observable<Personne[]> {
return this.http.post(`${this.baseUrl}/store`, { data: personne })
.pipe(map((res) => {
this.personnes.push(res['data']);
return this.personnes;
}),
catchError(this.handleError));
}
getSinglePersonne(id:number)
{
const pers=this.personnes.find(personneObject => personneObject.id ===
id) ;
return pers ;
}`
"My single-personnne.component.ts"
`export class SinglePersonneComponent implements OnInit {
personne =new Personne(0,'','','') ;
constructor(private route:ActivatedRoute,
private personnesService:PersonnesService,
private router:Router) { }
ngOnInit() {
const id=this.route.snapshot.params['id'] ;
this.personne = this.personnesService.getSinglePersonne(+id) ;
}`
"My template single-personnne.component.html" `
<div>
<h2>Nom :</h2>
<h3>{{personne.nom}}</h3>
</div>
<div>
<h2>Prénom :</h2>
<h3>{{personne.prenom}}</h3>
</div>
<div>
<h2>Numéro Téléphone:</h2>
<h3>{{personne.numTel}}</h3>
</div>
<button class="btn btn-default" (click)="updatePers()">Modifier</button>
` I anticipate retrieving a person with the ID=2 and wish to showcase it in the template