2017-09-13 46 views
0

我试图显示一些json数据,我从get请求中获取。到目前为止,我已经能够显示其他数组没有问题,但由于某种原因,我无法显示这个特定的数组,并且我没有收到任何错误。从数组显示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> 

编辑

它更改为其他变量名,因为你已经在使用显示,

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

噢,我忘了包括,但是这并没有解决问题 – Jason

+0

@Jason检查更新的答案 – Sajeetharan

+0

这是一个好主意,但由于某种原因,它仍然无法正常工作 – Jason

1

当它从你的快照看起来,对象的数组存储在变量showtimes,如果是这样的话,试试下面的代码:

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