Observablesを使用してOMDB APIを検索してムービー情報を取得する

Question

hey guys OMDB APIからムービー情報を取得するためにAngular2のObservablesを使用してライブ検索を実行しようとしています。私はそれがクロムのネットワークタブで動作していることがわかりますが、私はUIで結果を得ることはできません。

@Component({ 
    selector: 'movie-card', 
    templateUrl: './card.component.html' 
}) 
export class Component implements OnInit{ 
    movies: Observable<Array<Movie>>; 
    search = new FormControl; 

    constructor(private service: MovieService) {} 

    ngOnInit(){ 
    this.movies = this.search.valueChanges 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(search => this.service.get(search)) 
    } 
} 

MovieService

@Injectable() 
export class MovieService { 
    constructor (private http: Http) { } 
    get(path: string){ 
    return this.http 
     .get('www.omdbapi.com/?s=' + path) 
     .map((res) => res.json()) 
    } 
} 

と私のHTMLコンポーネントで、私は結果を表示するために入力して、UIを持っています。

私はこのように、私のネットワークタブで結果を参照してください入力環境のです

<input [formControl]="search"> 

<div *ngFor="let movie of movies | async"> 

<h1>{{movie.title}}</h1> 

：

しかし、それはUIに表示されません。誰か助けてもらえますか？ありがとう

Answer 1

使用しているサービスは配列ではなくJSONオブジェクトを返します。あなたのサービスは、映画の配列を返すことになっているのであれば、それは結果のSearchプロパティを返す必要があります

{ 
    "Search": [ 
    { 
     "Title": "Jason Bourne", 
     "Year": "2016", 
     "imdbID": "tt4196776", 
     "Type": "movie", 
     "Poster": "https:\/\/images-na.ssl-images-amazon.com\/images\/M\/MV5BMTU1ODg2OTU1MV5BMl5BanBnXkFtZTgwMzA5OTg2ODE@._V1_SX300.jpg" 
    }, 
    ... 
    ], 
    "totalResults": "16", 
    "Response": "True" 
} 

：たとえば、http://www.omdbapi.com/?s=jason%20bourneのようなものを返します

@Injectable() 
export class MovieService { 
    constructor (private http: Http) { } 
    get(path: string){ 
    return this.http 
     .get('www.omdbapi.com/?s=' + path) 
     .map((res) => res.json().Search || []) 
    } 
}