如何在從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.

電影類

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

總是檢查網絡選項卡，看看您是否實際接收數據以及數據的外觀如何。

對此進行測試。顯然，你首先需要建立自己的網址是這樣的：

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來顯示數據。

這應該清理一下！ :)