angular - 如何正确使用 [ngStyle] 函数

Question

我有以下错误不断返回调试控制台

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 + ')'};
}

Answer 1

当你看到:

Cannot read property 'url' of undefined

这意味着某些东西是未定义的。这意味着，您尝试读取属性的对象(在这种情况下为“url”)未定义。

尝试使用某种 isset()。在 javascript 中，您有几种方法可以对其进行排序。

我对数组的推荐是myArr[0] !== undefined，对于对象，你可以使用hasOwnProperty('url')。或者只使用带有 || 的简短版本:

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

阅读更多关于 javascript isset() here 的信息