cant iterate object array in template of component in typescript angular2

Question

I have service which return objects to component, and iterate objects inside template, some of the properties might be null and breaks the js how can I prevent this to happen ?

template:

<table id="simple-table" class="table table-striped table-bordered table-hover">
 <caption>Table of artists</caption>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>image</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let artist of artists">

            <td>{{artist.id}}</td>
            <td>{{artist.name}}</td>
            <td><img class="img-circle" style="width:100%" src="{{artist.images[0].url}}"></td>
        </tr>
    </tbody>
</table>

artist.images[0].url throws "annot read property 'url' of undefined" error since images is null how can I fix in single line with cascade conditions ?

What does console.log(this.artists) print instead of console.log(data)? — eko
– eko, Commented Dec 2, 2016 at 10:07
@echonax its sam, i set breakpoint in subscription function and check the value of artist property, all objects loaded, nothing suspicious looking in there — TyForHelpDude
– TyForHelpDude, Commented Dec 2, 2016 at 10:10
@GünterZöchbauer nothing, I think something wrong with binding here.. — TyForHelpDude
– TyForHelpDude, Commented Dec 2, 2016 at 10:13
Can you try adding private cdRef:ChangeDetectorRef to constructor parameters and call this.cdRef.detectChanges() after this.artists = ...;? — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 2, 2016 at 10:16

Günter Zöchbauer · Accepted Answer · 2016-12-02 10:31:38Z

3

You can safe-navigation ?. instead of . but not with [].

This should work

artists?.images && artist.images[0]?.url

or alternatively

<table *ngIf="artists.images.length" ...

answered Dec 2, 2016 at 10:31

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

cant iterate object array in template of component in typescript angular2

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