2017-09-13 12 views
0

取得リクエストから取得したjsonデータを表示しようとしています。これまでは問題のない別の配列を表示することができましたが、何らかの理由でこの配列を表示するのに問題があり、エラーは発生していません。配列からjsonデータを表示する

正しく表示されないものは、ショータイムアレイです。すでにショーを使用しているので、

enter image description here

<div *ngIf="show"> 
<div *ngFor="let shows of show"class="showtime"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">{{shows.title}}</h3> 
    </div> 
    <div class="panel-body" > 
     <div class="row"> 
      <div class="col-md-7 col-sm-5 col-xs-12 "> 

       <img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br> 

      </div> 
      <div class="col-md-5 col-sm-7 col-xs-12"> 
       <ul class="list-group"> 
        <li class="list-group-item">Genres: {{shows.genres}}</li> 
        <li class="list-group-rel">Release Date: {{shows.releaseDate}}</li> 
        <li class="list-group-rel">{{shows.longDescription}}</li> 
        <li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li> 
       </ul> 

      </div> 
     </div> 

    </div> 
    </div> 
    </div> 
    </div> 
+1

サイドノートのおかげで動作します:あなたは、同じタグで 'ngIf'と' ngFor'を使用することができます。余分な 'div'の必要はありません。 – mok

答えて

0

ネストされたngForループは、問題を解決した。..

<div *ngFor="let shows of show"> 
    <div *ngFor="let detail of shows.showtimes"> 
    <p>{{detail.theatre.name}}</p> 
    </div>    
</div> 

は、完全に助け

4

あなたは、いくつかの他の変数名に変更し、それを

<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li> 

EDIT

表現{{}}欠けている

<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li> 
+0

ああ、私はそれを含めるのを忘れていたが、それは問題を解決しない – Jason

+0

@ジェイソンは、更新された答えを確認する – Sajeetharan

+0

thats良いアイデアだが、それはまだ動作しません – Jason

1

それはあなたのスナップショットから見えるとして、オブジェクトの配列は、そのような場合には、以下のコードを試してみてください、変数showtimesに格納されます。

<li *ngFor="let detail of showtimes" class="list-group-rel"> 
    {{detail.theatre.name}} 
</li> 
関連する問題