如何正确使用 [ngStyle] 函数

Question

我有以下错误，不断 returns 我调试控制台

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

Answer 2

您可以使用 ? 运算符在模板中执行相同的操作。 ? 运算符使它后面的所有内容都是可选的，这样您在尝试读取 undefined.

的内容时就不会出错

<div [style.background-image]="'url('+events[i].images[0]?.url+')'">

如何正确使用 [ngStyle] 函数

how to use correctly [ngStyle] with function

background-image

angular