how to use correctly [ngStyle] with function

Question

I have the following error that constantly returns me the debug console

HomeComponent.html:33 ERROR TypeError: Cannot read property 'url' of undefined at HomeComponent.getImageEvent (home.component.ts:73) at Object.eval [as updateDirectives] (HomeComponent.html:33)

HomeComponent.html

<div [ngStyle]="getImageEvent(i)">

home.component.ts

getImageEvent(index: number): object {
 return {'background-image': 'url(' + this.events[index].images[0].url + ')'};
}

The issue might be inside your array. Any chances your `images[0]` not have the `url` property? Or the images array be empty? try `console.log(this.events[index].images)` and see what shows up — Leo Caseiro, Jun 01 '18 at 00:16
Thank you very much for the help you gave me, do not really consider that bug, sometimes you do not see the essentials !! — Gabriel Sule, Jun 01 '18 at 00:38

score 3 · Accepted Answer · answered Jun 01 '18 at 00:56

When you see:

Cannot read property 'url' of undefined

It means something is undefined. Which means, the object you are trying to read the property (in that case 'url') is not defined.

Try use some kind of isset(). In javascript you have a few ways to sort that.

My recommendation for arrays is myArr[0] !== undefined, for objects, you can use hasOwnProperty('url'). Or just use the short version with || :

getImageEvent(index: number): object {
    const img = this.events[index].images[0] || {}; // is array defined?
    const imgSrc = img.url || ''; 
    return {'background-image': 'url(' + imgSrc + ')'};
}

how to use correctly [ngStyle] with function

2 Answers2

Linked