显示带角度的json结果

Question

我想从web api获取一些json数据。到目前为止，我已经得到了API的响应，现在我试图定位一个值并在YouTube链接的末尾插入该值。

movie.component.html 

<div *ngIf="movie"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">{{movie.title}}</h3> 
    </div> 
    <div class="panel-body" > 
     <div class="row"> 
      <div class="col-md-7"> 
       <img class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}"> 
      </div> 
      <div class="col-md-5"> 
       <ul class="list-group"> 
        <li class="list-group-item">Genres:<span *ngFor="let genre of movie.genres"> {{genre.name}}</span></li> 
        <li class="list-group-rel">Release Date: {{movie.release_date | date}}</li> 
       </ul> 
       <p>{{movie.overview}}</p> 
       <br> 
       **<div *ngIf="videos"> 
       <div *ngFor="let video of videos"> 
       <iframe width="360" height="215" src="https://www.youtube.com/embed/{{video.key}}" frameborder="0" allowfullscreen></iframe>** 
       </div> 
       </div> 
       <h4>Rating</h4> 
       <p>{{movie.vote_average}}/10</p> 
       <a *ngIf="movie.homepage" href="{{movie.homepage}}" target="_blank" class="btn btn-default">Visit Movie Website</a> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

----------------- 
movie.component.ts 

export class MovieComponent implements OnInit { 


movie:Object; 
videos: Object; 

constructor(private router:ActivatedRoute, private _movieService:MovieService) 
{ 

} 

ngOnInit() { 

this.router.params.subscribe((params) =>{ 
    let id = params['id']; 
    this._movieService.getMovie(id).subscribe(movie =>{ 
     this.movie = movie; 
    }); 
}); 
    this.router.params.subscribe((params) =>{ 
    let id = params['id']; 
    this._movieService.getTrailer(id).subscribe(videos =>{ 
    this.videos = videos; 
    }); 
}); 
} 

} 

这是从AP的反应，我想为目标的“钥匙”值，并在Youtube链接

的末尾插入，但我得到这个错误

Answer 1

这里的问题是你正在使用* ngFor作为对象。

* ngFor：用于迭代数组。

现在你有反应是一个对象，这个对象里面你有一个数组结果我相信这是你想要遍历数组。

你只需要改变你的模板* ngFor。

... 
<div *ngFor="let video of videos.results"> 
...