javascript - 用 Angular 显示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: is used to iterate arrays.

现在你得到的响应是一个对象，在这个对象中你有一个数组result我相信这是你想要迭代的数组。

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

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