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

Question

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

异常：类型错误：无法读取未定义的属性“url” [背景图片：url('{{content[img].url}}');在主页@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}}

希望这对某人有所帮助！

Answer 2

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

我希望 content[img] 返回 null，尤其是在 img 为 null 或未定义的情况下。而content.img 则不是这样。

你确定不用content[img]这个表达式吗？

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