2016-09-21 38 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,编译器有时无法解析变量并且无法启动应用程序。有了这个解决方案,解决了我的问题。