使用 observables 搜索 OMDB API 以检索电影信息

Question

大家好，我正在尝试使用 Angular2 中的 Observables 进行实时搜索，以从 OMDB API 检索电影信息。我可以看到它在 Chrome 网络选项卡中工作，但我没有在 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))
  }
}

电影服务

@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

您正在使用的服务return是一个JSON对象——不是数组。例如，http://www.omdbapi.com/?s=jason%20bourne 将 return 类似于：

{
  "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"
}

因此，如果您的服务应该 return 一组电影，它应该 return 结果的 Search 属性：

@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 || [])
  }
}

Answer 2

这种方式对我有用：在 angular 6

服务文件：

import { Injectable } from '@angular/core';
import 'rxjs/RX';
import 'rxjs/add/operator/map';
import {Http, Response} from '@angular/http';

@Injectable()

 export class omdbService {
 searchMovieByTitle(title: String) {
 const url = 'http://www.omdbapi.com/?s=' + title + '&apikey=da53126b';
  return this.http.get(url).map( (response: Response ) => {
   return response.json();  } ); }

   constructor (private http: Http) { }
   }

HTML 文件:

     <label>movietitle</label>
      <input #input class="form-control" />
       <button mdbBtn type="button" color="info" outline="true" mdbWavesEffect
           (click)="searchMovie(input.value)" >
         Search
        </button>

     <ul class="list-group">
       <li  class="list-group-item" *ngFor =" let movie of result.Search" >
           {{movie.Title}}   {{movie.imdbID}}
      </li>
    </ul>

TS 文件：

import { omdbService } from './../service/omdb.service';
import { Component } from '@angular/core';
 @Component({
             selector: 'app-search',
             templateUrl: './search.component.html',
             styleUrls: ['./search.component.scss']
                })

    export class SearchComponent  {

         title  = '';
         result: Object = null;

     searchMovie(title: String) {
        this.OmdbService.searchMovieByTitle(title).subscribe( (result) => {
      this.result = result;     console.log(result);
             });                }

      constructor(private OmdbService: omdbService) { }

        }

使用 observables 搜索 OMDB API 以检索电影信息

Using observables to search OMDB API to retrieve movies info

typescript

angular2-observables

angular