在 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.

电影class

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 才能显示您的数据。

这应该搞清楚了！ :)

在 Angular2 中从外部源获取 JSON 后如何显示结果

How to display results after fetching JSON from external source in Angular2

json

jsonp

object

observable

angular