TypeError：未定義の 'url'プロパティを読み取ることができません

Question

REST APIからangular2を使用してデータを取得しようとしていますが、これまでのところすべて正常です。しかし、コンソールに表示されるエラーは、{{content.img.url}}を呼び出すときのみです。フェッチする必要がある画像URLをフェッチして画像を表示するときにのみウェブページを正常に実行しますが、クロムコンソールに表示されます。

私は実際にはコンソールにエラーが表示される理由を知りません！これを解決するための任意のアイデア？

以下は、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を使用してください。それは本当に違います。私は、2番目のオブジェクトがcontentオブジェクトのimgプロパティにアクセスすることを意味します。最初のものは、名前がimg変数に指定されたプロパティです。

content[img]はnullを返します。特にimgがnullまたは未定義の場合は特にそうです。一方、content.imgの場合はそうではありません。

content[img]という表現は使用しないでください。

この参照：http://plnkr.co/edit/IFAuvA36YXelXkUG4HfN?p=previewを参照してください。