TypeError: property of undefined (Angular)

Question

I have an .html file where I use {{candidate.phone}} and I can see the result on page but in console have error ERROR TypeError: Cannot read property 'phone' of undefined. If I correctly understand it's 'cause ngOnInit doesn't waiting for the response of getCandidate(), so the question is how can I call this function after it's completely finished?

Here's my code:

candidate: ICandidatesInfo;
    
ngOnInit(): void {
  this.getCandidate();
}

getCandidate() {
  this.candidateInfoService
    .getById(this.route.snapshot.params['id'])
    .subscribe(candidate => this.candidate = candidate);
}

In service:

getById(id: string): Observable<ICandidatesInfo> {
  return this.http.get<ICandidatesInfo>(`${this.url}/${id}`);
}

Would be really grateful for any help!

You can use *ngIf statement or check if candidate is exists like this {{candidate?.phone}} — Armen Stepanyan
– Armen Stepanyan, Commented Sep 9, 2020 at 10:24

Abolfazl Roshanzamir · Accepted Answer · 2020-09-09 10:26:03Z

2

You have 3 options :

1- use *ngIf

<span *ngIf="candidate && candidate.phone">{{candidate.phone}}</span>

2- set default value for your model (candidate)

candidate: ICandidatesInfo={phone:null , ... }

3- use ?

{{candidate?.phone}}

answered Sep 9, 2020 at 10:26

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: property of undefined (Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related