2016-09-21 24 views
0

我在Angular2 beta 7中製作了一個應用程序,用於從Web API檢索電影信息。這一切都運行良好,但現在我試圖在Angular 2的最終版本中做同樣的事情。除了將JSON信息映射到我自己的MovieInformation對象外,我可以使大部分應用程序正常工作。無法獲得從JSON到Object的可觀察映射以工作

電影information.ts:

export class MovieInformation { 
    constructor(
     public imdbID: number, 
     public title: string, 
     public year: number, 
     public genre: string, 
     public runtime: string, 
     public poster: string, 
     public director: string, 
     public writer: string, 
     public actors: string, 
     public plot: string, 
     public metascore: number, 
     public imdbRating: number, 
     public imdbVotes: number, 
     public type: string, 
     public favorite: boolean = false 
    ) 
    { 

    } 
} 

movie.service.ts

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

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

import {Movie} from '../model/movie'; 
import {MovieInformation} from "../model/movie-information"; 

const searchMoviesUrl = (title) => `http://www.omdbapi.com/?s=${title}`; 
const movieInformationUrl = (imdbId) => `http://www.omdbapi.com/?i=${imdbId}`; 

@Injectable() 
export class MovieService { 
    constructor(private http:Http) { 

    } 

    ... 

    getMovieInformation(movie:Movie): Observable<MovieInformation> { 
     console.log(movieInformationUrl(movie.imdbID)); 
     return this.http.get(movieInformationUrl(movie.imdbID)).map(result => result.json()) 
     .map(m => new MovieInformation(m.imdbID, m.Title, m.Year, m.Genre, m.Runtime, m.Poster, m.Director, 
       m.Writer, m.Actors, m.Plot, m.Metascore, m.imdbRating, m.imdbVotes, m.Type, movie.favorite)) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

我試圖做的是映射JSON結果(http://www.omdbapi.com/?i=tt1245526):

{"Title":"RED", 
"Year":"2010", 
"Rated":"PG-13", 
"Released":"15 Oct 2010", 
"Runtime":"111 min", 
"Genre":"Action, Comedy, Crime", 
"Director":"Robert Schwentke", 
"Writer":"Jon Hoeber (screenplay), Erich Hoeber (screenplay), 
Warren Ellis (graphic novel), Cully Hamner (graphic novel)", 
"Actors":"Bruce Willis, Mary-Louise Parker, Heidi von Palleske, Karl Urban", 
"Plot":"When his peaceful life is threatened by a high-tech assassin, 
former black-ops agent Frank Moses reassembles his old team in a last 
ditch effort to survive and uncover his assailants.", 
"Language":"English, Russian", 
"Country":"USA", 
"Awards":"Nominated for 1 Golden Globe. Another 3 wins & 17 nominations.", 
"Poster":"http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg", 
"Metascore":"60", 
"imdbRating":"7.1", 
"imdbVotes":"239,853", 
"imdbID":"tt1245526", 
"Type":"movie", 
"Response":"True"} 

我自己的MovieInformation模型類使用.map(m => new MovieInformation(...)),但我無法讓TypeScript編譯器識別JSON中的映射變量,例如m.Title,它存在於JSON。

有人能告訴我我做錯了什麼導致這個問題?

+0

如果我試圖像 那樣解決它返回this.http.get(movieInformationUrl(movie.imdbID))。map(result => new MovieInformation(result.json()。imdbID,result.json()。標題... 然後它工作,但我發現使用result.json()一直非常醜陋。 –

回答

0

我固定它使用:

return this.http.get(movieInformationUrl(movie.imdbID)).map(result => result.json()) 
      .map((m: any) => new MovieInformation(m.imdbID, m.Title, m.Year, m.Genre, m.Runtime, m.Poster, m.Director, 
      m.Writer, m.Actors, m.Plot, m.Metascore, m.imdbRating, m.imdbVotes, m.Type, movie.favorite)) 
     .catch(this.handleError); 

鑑於解決辦法在於在第(m:任意)m限定爲任何類型的,因此編譯器假定任何變量可從任何,像標題和年度我的例子。所以米:任何是我得到的JSON響應。

如果沒有鍵入m,編譯器有時無法解析變量並且無法啓動應用程序。有了這個解決方案,解決了我的問題。