web-dev-qa-db-ja.com

Angular2でObservableを使用してIDで配列の要素を見つける方法

Httpプロミスの代わりにObservableを使用することにしました。

それが私のPromiseサービスの見た目です：

export class MovieService {

    movies: Movie[]
    movie: Movie;
    constructor(private http:Http) { }

   getMovies(): Promise<Movie[]>{

        return this.http.get('http://api.request.com')
            .toPromise()
            .then((res:Response) => res.json()['results'])

    }
    getMovie(id: number): Promise<Movie> {
        return this.getMovies()
            .then(movies => movies.find(movie => movie.id == id));

    }

}

最初に映画の配列を取得し、IDで配列の特定の映画を見つけます。ただし、Observableで同じことをしようとすると、findでエラー通知が表示されます。プロパティ 'find'はタイプ 'Movie []'に存在しません。

これが、Observableサービスで試したことです。

export class MovieService {

    movies: Movie[];
    movie: Movie;

    constructor(private http: Http) {
    }

    getMovies(): Observable<Movie[]> {

        return this.http.get('http://api.request.com)
            .map((res: Response) => res.json()['results']);
    }

    getMovie(id: number): Observable<Movie> {
        return this.getMovies()
            .subscribe(movies => movies.find(movie => movie.id == id));
    }
}

Promiseサービスと同じようにObservableサービスで同じ機能を実現するにはどうすればよいですか？

angulartypescriptrxjsobservable
11
GaborH

mapオブジェクトを返すsubscribeの代わりにSubscriptionメソッドを使用する必要があると思います

export class MovieService {
  movies: Movie[];
  movie: Movie;

  constructor(private http: Http) {}

  getMovies(): Observable<Movie[]> {
    return this.http.get('http://api.request.com')
      .map((res: Response) => res.json()['results']);
  }

  getMovie(id: number): Observable<Movie> {
    return this.getMovies()
      .map(movies => movies.find(movie => movie.id == id));
  }
}

プランカーの例

17
yurzui