Anzeige Json Ergebnisse mit eckigen

Question

Ich versuche, einige JSON-Daten von einem Web-API zu bekommen. Bis jetzt habe ich die Antwort von der API erhalten, jetzt versuche ich, einen Wert anzusteuern und diesen Wert am Ende des Youtube-Links einzufügen.

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; 
    }); 
}); 
} 

} 

dies die Antwort von Api ist, ich versuche, den „Schlüssel“ Wert und legen Sie sie am Ende des YouTube-Link

aber ich bekomme diese Fehlermeldung

Ziel

Answer 1

das Problem hier, dass Sie * ngFor für ein Objekt verwenden.

* ngFor: wird verwendet, um Arrays zu iterieren.

jetzt die Antwort, die Sie haben, ist ein Objekt, in diesem Objekt, das Sie haben ein Array Ergebnis Ich glaube, das das Array Sie iterieren möchten.

Sie müssen nur die * ngFor in Ihrer Vorlage ändern.

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