Question

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

HomeComponent.html：33 ERROR TypeError：无法读取属性＆＃39; url＆＃39;未定义的在HomeComponent.getImageEvent（home.component.ts:73）在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

当你看到：

无法读取属性＆＃39; url＆＃39;未定义的

这意味着某些东西是未定义的。这意味着，您尝试阅读该属性的对象（在这种情况下＆＃39; url＆＃39;）未定义。

尝试使用某种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]功能

2 个答案: