用角度显示json结果

Question

我正在尝试从网络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;
    });
});
}

}

这是Api的回复，我正在尝试定位“关键”值并将其插入到youtube链接的末尾

但是我收到了这个错误

Answer 1

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

  

* ngFor：用于迭代数组。

现在您的响应是一个对象，在此对象中您有一个数组结果我相信这是您想要迭代的数组。

您只需要在模板中更改* ngFor。

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