Angular 6 - ERROR TypeError: Cannot read property 'firstName' of undefined, While showing the output

1
votes

I'm getting following error in Angular 6. I'm showing json data which were return from the database. When I do a console.log in the .ts file, it shows me the whole array with data. Even this gives an error saying firstName is undefined, it displays the correct firstName in the relevant place. Even if I use *ngIf="user.firstName" the error remains same. If I put another attribute in the array before the user.firstName, the error is given to that attribute and display the correct output.

Eg : 

{{user.firstName}}

ERROR TypeError: Cannot read property 'firstName' of undefined at Object.eval [as updateDirectives]

{{user.lastName}}
{{user.firstName}}

ERROR TypeError: Cannot read property 'lastName' of undefined at Object.eval [as updateDirectives] The error will shows only for lastName in here.

May I know the reason for this.

1
htmljsontypescriptangular6

1 Answers

8
votes

Use the safe navigation operator ?.

{{user?.lastName}}
{{user?.firstName}}

It is user that is undefined.

You could also use

<ng-container *ngIf="user">
    {{user.lastName}}
    {{user.firstName}}
<ng-container>