Angular2の外部ソースからJSONを取得した後の結果を表示する方法

Question

omdbapi.com APIを使用してムービーデータ用の簡単な検索エンジンを作っています。私は、ビューを作成するためのデータとコンポーネントを取得するためにサービスを設定しているが、私は、私はエラーを取得するHTMLに接続しようとすると：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Movieクラス

export class Movie { 
    constructor(
     Title: string, 
     Year: string, 
     Rated: string, 
     Released: string, 
     Runtime: string, 
     Genre: string, 
     Director: string, 
     Writer: string, 
     Actors: string, 
     Plot: string, 
     Language: string, 
     Country: string, 
     Awards: string, 
     Poster: string, 
     Metascore: string, 
     imdbRating: string, 
     imdbVotes: string, 
     imdbID: string, 
     Type: string, 
     Response: string 
    ) {} 

} 

をここにあります私のコンポーネント：

import { Component, OnInit } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 

//observable class extensions 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/map'; 
//observable operators 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 

import { MovieSearchService } from './movie-search.service'; 
import { Movie } from './movie'; 

@Component({ 
    selector: 'movie-search', 
    templateUrl: './movie-search.component.html', 
    styleUrls: ['./movie-search.component.css'], 
    providers: [MovieSearchService] 
}) 

export class MovieSearchComponent implements OnInit { 
    movies: Observable<Movie[]>; 
    private searchTerms = new Subject<string>(); 

    constructor(
     private movieSearchService: MovieSearchService, 
     private http: Http 
    ) {} 

    search(term:string) { 
     return this.searchTerms.next(term); 
    } 

    ngOnInit(): void { 
     this.movies = this.searchTerms 
     .debounceTime(300) // wait 300ms after each keystroke before considering the term 
     .distinctUntilChanged() // ignore if next search term is same as previous 
     .switchMap(term => term // switch to new observable each time the term changes 
     // return the http search observable 
     ? this.movieSearchService.search(term) 
      // or the observable of empty heroes if there was no search term 
     : Observable.of<Movie[]>([]) 
     ) 
     .catch(error => { 
      console.log("--------- Error -------"); 
      console.log(error); 

      return Observable.of<Movie[]>([]); 
     })  
    } 
} 

これはサービス

import { Injectable } from '@angular/core'; 
import { Http, Jsonp } from '@angular/http'; 

import { Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

import { Movie } from './movie'; 

@Injectable() 
export class MovieSearchService { 
    constructor(
     private http: Http, 
     private jsonp: Jsonp 
    ) {} 

    search(term: string): Observable<Movie[]> { 
     return this.http 
      .get(`http://www.omdbapi.com/?s=${term}`) 
      .map(response => { 
       return response.json().each() as Movie[] 
      }) 
    } 
} 

です

とビュー

<div class="col-xs-12"> 
    <input #searchBox id="search-box" /> 
    <button (click)="search(searchBox.value)">Search</button> 
</div> 

<ul *ngIf="movies"> 
    <li *ngFor="let movie of movies"> 
     {{ movie.title }} 
    </li> 
</ul> 

どのように私は、ビューは、各映画の映画のタイトルを表示させることが？ お時間をいただきありがとうございます。

Answer 1

常にネットワークタブをチェックして、実際にデータを受信して​​いるかどうか、そのデータがどのように表示されているかを確認してください。

これをテストします。どうやら最初にすべてのこのようなあなたのURLを構築する必要があります：

return this.http.get('http://www.omdbapi.com/?s='+term) 

次に応答へと、それは次のように構築されています：

{"Search":[{"Title":"24","Year":"2001–2010","imdbID".... 

あなたは配列を取得するために抽出する必要がありますだから何：

.map(response => {response.json().Search}) 

およびコンポーネントにサブスクライブ：

this.movieSearchService.search(term) 
    .subscribe(d => this.movies = d) 

その後、

、あなたのタイトルを表示する：

<ul *ngIf="movies"> 
    <li *ngFor="let movie of movies"> 
     {{ movie.Title }} 
    </li> 
</ul> 

は、上記のコードでSearchとTitleに注意してください。これは大文字と小文字が区別されるため、{{ movie.Title }}と大文字のTを使用してデータを表示する必要があります。

これで問題は解決します。 :)