Angular 如何正确使用[ngStyle]函数

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

HomeComponent.html:33错误类型错误：无法读取未定义的属性“url” 在HomeComponent.getImageEvent（home.component.ts:73） 在Object.eval[作为updateDirectives]（HomeComponent.html:33）

HomeComponent.html

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

当你看到：

无法读取未定义的属性“url”

这意味着有些东西没有定义。这意味着，您试图读取属性的对象（在这种情况下为“url”）未定义

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

我对阵列的建议是

myArr[0]！==未定义的

，对于对象，可以使用

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

---

阅读有关的更多信息您可以使用

？

操作符在模板中执行相同的操作。

？

操作符使其后面的所有内容都是可选的，这样您就不会在尝试读取未定义的内容时出错

问题可能在阵列内部。您的

图像[0]

是否可能没有

url

属性？或者图像数组是空的？尝试<代码>控制台。log（这个事件[索引]图片），看看上面显示了什么，非常感谢你给我的帮助，不要真的考虑那个bug，有时你看不到要点！！

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

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