2016-12-02 7 views
1

コンポーネントにオブジェクトを返し、テンプレート内のオブジェクトを反復処理するサービスがあります。プロパティの一部がnullでjsが破損する可能性があります。斜体オブジェクトの配列を型スクリプトのコンポーネントのテンプレートに入れます。angular2

テンプレート:[0]する.url私はカスケード条件を備えた単一のラインに修正することができますどのようにnullの画像ので、エラー "未定義のANNOT読まプロパティ 'URL'" をスロー

<table id="simple-table" class="table table-striped table-bordered table-hover"> 
<caption>Table of artists</caption> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>name</th> 
      <th>image</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let artist of artists"> 

      <td>{{artist.id}}</td> 
      <td>{{artist.name}}</td> 
      <td><img class="img-circle" style="width:100%" src="{{artist.images[0].url}}"></td> 
     </tr> 
    </tbody> 
</table> 

artist.images?

+1

? – echonax

+0

{{artists | json}}
」とは何ですか? –

+0

@echonaxそのサム、私はサブスクリプション機能でブレークポイントを設定し、アーティストのプロパティの値をチェックし、すべてのオブジェクトがロードされている、何も疑問がありませんそこを見てください – TyForHelpDude

答えて

3

.ではなく?.の代わりに[]を使用することはできます。

これは動作するはず

artists?.images && artist.images[0]?.url 

または `はconsole.log(this.artists)の代わりに`はconsole.log(データ)の ``印刷を何代わり

<table *ngIf="artists.images.length" ...