javascript - 类型错误 : 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

我设法使用 Elvis 运算符解决了这个问题(即，在我的例子中我使用了:

{{content.img?.url}}

希望这对某人有帮助!