Question

我正在尝试使用angular2从REST API获取数据，到目前为止一切都很顺利;但是，我只有在调用{{content.img.url}}时才会在控制台上显示错误，只有当它获取需要获取的图像网址并显示图像时，它才能在网页上正常执行，但在Chrome控制台中显示：< / p>

EXCEPTION：TypeError：无法读取未定义的属性'url' [background-image：url（'{{content [img] .url}}'）;在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}}

希望这有助于某人！

Answer 2

该消息告诉您消息中的content[img].url，我可以看到您使用content.img.url。这真的与众不同。我的意思是第二个访问img对象的content属性。第一个是名称指定在img变量中的属性。

我希望content[img]返回null，尤其是img为null或未定义时。然而content.img并非如此。

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

请参阅此plunkr：http://plnkr.co/edit/IFAuvA36YXelXkUG4HfN?p=preview。

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

2 个答案: