如何在Angular2中使用Observable通过id查找数组的元素

Posted 2023-03-13

【中文标题】如何在Angular2中使用Observable通过id查找数组的元素

【英文标题】：How to find an element of an array by id with Observable in Angular2

【发布时间】：2017-03-22 14:02:51

【问题描述】：

我决定使用 Observable 而不是 Http 承诺。

这就是我的 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 执行相同操作时，我在查找时收到错误通知：“电影 []”类型上不存在属性“查找”。

这是我对 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));
    

如何在我的 Observable 服务中实现与 Promise 服务中相同的功能？

【问题讨论】：

类型 'Movie[] 上不存在属性 'find' 是类型错误，因为 TS 配置错误。它应该有lib: ['es6'] 选项。

你是对的。我改变了它，它现在可以与 find 一起使用。谢谢。

【参考方案1】：

我想你应该使用map 方法而不是返回Subscription 对象的subscribe

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));
  

Plunker Example

【讨论】：

我也想到了，因为我必须订阅，当我从其他组件调用该函数时。但是它在地图上给出了同样的错误。

你是怎么用的？

如果您可以发布错误和/或堆栈跟踪信息会很有帮助。

基本上，我尝试了您在上面发布的内容，“查找”仍然给出相同的错误。

@Siri0S 没有堆栈跟踪，我只是无法在电影上调用 find 方法。当我将鼠标悬停在 find 上时，它会显示：“Movie[]”类型上不存在“find”属性。