Iterating through an array of an object anglar2

Question

I'm new to angular 2 and have a scenario where my service returns an object to my component and within the object there are a couple arrays.

One example is the 'phones' array.

In my view, I want to display each number in a list and I thought I could simple do the following:

<ion-item class="item-icon-left item-icon-right" id="contact-list-item8" *ngFor="let phone of contact.phones">
    <i class="icon ion-ios-telephone"></i>
    <small>{{phone.phone_type}} phone</small>
    <br>
    <a href="tel:{{phone.phone_number}}">{{phone.phone_number}}</a>
    <i class="icon ion-ios-chatbubble-outline"></i>
</ion-item>

I know the contact object is right, because I'm able to display other fields form the object, but for the *ngFor look, I get "Cannot read property 'phones' of undefined".

What am I missing here?

The safe navigation operator should solve your issue. If not, shout out :) — AT82, Nov 09 '17 at 15:32
Damn he closed it before I could answer. Dude, just add `| async` after `contact.phones` in your ngFor. — , Nov 09 '17 at 15:32

score 2 · Accepted Answer · answered Nov 09 '17 at 15:32

2

Try to use the safe navigation operator in this case,

<ion-item class="item-icon-left item-icon-right" id="contact-list-item8" *ngFor="let phone of contact?.phones">

answered Nov 09 '17 at 15:32

Sajeetharan

216,225
63
350
396

1

Thanks Sajeetharan. I keep forgetting about the async operator! – cnak2 Nov 09 '17 at 15:38
cool! mark if that helped – Sajeetharan Nov 09 '17 at 15:39

Iterating through an array of an object anglar2

1 Answers1