如何正确使用 [ngStyle] 与功能答案

【问题标题】：how to use correctly [ngStyle] with function如何正确使用 [ngStyle] 与功能
【发布时间】：2018-05-31 23:27:29
【问题描述】：

我遇到以下错误，不断返回调试控制台

HomeComponent.html:33 错误类型错误：无法读取未定义的属性“url” 在 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 + ')'};
}

【问题讨论】：

问题可能在您的阵列内部。您的images[0] 是否有可能没有url 属性？或者图像数组为空？试试console.log(this.events[index].images) 看看会出现什么
非常感谢你给我的帮助，不要真的考虑那个bug，有时你看不到要领！！

标签： angular background-image

【解决方案1】：

当你看到：

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

这意味着某些东西是未定义的。这意味着，您尝试读取属性的对象（在这种情况下为“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的信息

【讨论】：

【解决方案2】：

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

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

【讨论】：