TypeError: Cannot read property 'url' of undefined

Question

我正在尝试使用 angular2 从 REST API 获取数据，到目前为止一切正常；但是，我有一个错误，仅在调用 {{content.img.url}} 时才在控制台上显示它仅在获取需要获取的图像 url 并显示图像时在网页上执行正常，但在 chrome 控制台显示：

EXCEPTION: TypeError: Cannot read property 'url' of undefined in [background-image: url('{{content[img].url}}'); in HomePage@63:29]

我真的不知道为什么它只在控制台中显示错误！有解决这个问题的想法吗？

您可以在下面找到我使用 REST API 获取数据的实际操作的详细信息，欢迎提出改进代码的建议！

home.html

 <div *ngFor="#content of c1">
 <div class="cards" style="background-image: url('{{content.img.url}}');">
 <div class="txt">{{content.c1Name}}</div></div>
 </div>

home.js

export class HomePage {
static get parameters(){
return [[Http]];
}

constructor(http) {
this.http = http;
this.c1 = null;
//this is a bad way to do it as _defaultOptions is Protected, is there any way to do it better?
this.http._defaultOptions.headers.append('X-Parse-Application-Id', 'appk');
this.http._defaultOptions.headers.append('X-Parse-REST-API-Key', 'apikey');

this.http.get('https://example.com/classes/table').subscribe(data => {
    this.c1 = data.json().results;
});

}

获取的输出 JSON

0:Object
  createdAt:"2016-01-08T13:55:53.558Z"
  c1Name:"Jack"
  img:Object
     __type:"File"
     name:"tfss-6a8bf-1db8-4545-91e6-18-file.jpg"
     url:"http://files.parsetfss.com/f213b50e-dsdsdas-23fsrfdfd-d/file.jpg"
  objectId:"3mfH4sd23"
  updatedAt:"2016-01-08T17:21:00.678Z"

Answer 1

消息中提到了content[img].url，我看到你使用了content.img.url。真的很不一样。我的意思是第二个访问 content 对象的 img 属性。第一个属性的名称在 img 变量中指定。

我希望 content[img] returns 为 null，特别是如果 img 为 null 或未定义。而 content.img.

并非如此

您确定不要使用表达式 content[img].

看到这个 plunkr：http://plnkr.co/edit/IFAuvA36YXelXkUG4HfN?p=preview。

Answer 2

我设法通过使用 Elvis 运算符解决了这个问题（即）在我的案例中我使用了：

{{content.img?.url}}

希望这对某人有所帮助！

TypeError: Cannot read property 'url' of undefined

TypeError: Cannot read property 'url' of undefined

javascript

http-get

angular