Can't display target array within object using *ngFor

Question

I have an angular app where for one view I'm displaying a list of contact phone numbers.

Example of my object:

contact: { name:'sam smith', phones:[ {phone_type:'home', phone_number:'222-222-2222'}, {phone_type:'mobile', phone_number:'333-333-3333'} ] }

In my html I can access the contact name with {{contact.name}}

But if I try to loop the phones array with *ngFor like this:

<div *ngFor="let phone of contact.phones">{{phone.phone_number}}</div>

I get:

"ContactEditPage.html:61 ERROR TypeError: Cannot read property 'phones' of undefined".

So I know the object is being returned, but why can't I look through the phones array?

It's most likely because you're loading the data asynchronously and you should initialize contact as an object {} — Brian Putt
– Brian Putt, Commented Apr 1, 2018 at 3:46

Sajeetharan · Accepted Answer · 2018-04-01 03:47:13Z

2

You should use safe navigation operator to check if the values are there because your api call return the data asynchronously

<div *ngFor="let phone of contact?.phones">{{phone?.phone_number}}</div>

answered Apr 1, 2018 at 3:46

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Does '?' make the call asynchronous?

no it wont throw undefined error until you get the data from the api

That did it. Thanks!!