Observable of array with filter 使用 Angular 5 和 RxJS

Question

我正在创建一个简单的论坛。

我想过滤 post。我在 RxJS 中使用 .pipe 和 .filter 遇到了一些麻烦。

我正在尝试：

从 api/posts 中检索内存中的列表-api post，当与 http.get 一起使用时，它 returns 和 Observable<Post[]>
遍历 Observable<Post[]> 中的每个 Post 并对其进行过滤，使其只有 selects，也就是说，每个 post 的 ID 为 1 （只有一个 ID 为 1 的 post 存在）。
将任何错误或函数是否成功记录到控制台

filter 不是 select Post[] 数组中的每个单独的部分，而是 select 和 Post[] 本身。

我的代码：

getPosts(): Observable<Post[]> {

  // Sets the url to the service's postsUrl
  const url = this.postsUrl;

  // The http.get returns an Observable<Post[]>
  return this.http.get<Post[]>(url)
    .pipe(
      filter(
        post: Post => post.id == 1
      ),
      // Log posts were fetched
      tap(posts => console.log('Posts fetched.')),
      // Error handling
      catchError(this.handleError('getPosts', []))
    );
 }

我的错误：

Property 'id' does not exist on type 'Post[]'

在我看过的所有示例中，过滤器都没有这个问题。我认为它应该遍历 Post[] 数组中的所有值，因此我可以将其作为 Post 类型访问。

回答后编辑

基于已接受的答案，我的最终代码如下所示：

在posts.service.ts中：

getPosts(): Observable<Post[]> {

  const url = this.postsUrl;

  // Return the observable with array of Posts
  return this.http.get<Post[]>(url)
    .pipe(
      // Log posts were fetched
      tap(posts => console.log('Posts fetched.')),
      // Error handling
      catchError(this.handleError('getPosts', []))
    );

}

在posts.component.ts中：

private getPosts(): void {
  this.service.getPosts()
    // Map posts to a filtered version
    .map(
      posts => posts.filter(
        post => post.from_board_id == this.from_board_id
      )
    )
    // Subscribe it
    .subscribe(
      posts => this.posts = posts
    )
  ;
}

Answer 1

Observable 是值流。你对 RXJS 说你将收到 Post[] 的流，换句话说，Array<Post>.

如果你想过滤数组，你可以这样做：

 return this.http.get<Post[]>(url).map(posts => posts.filter(post => post.id === 1))

Observable of array with filter 使用 Angular 5 和 RxJS

Observable of array with filter using Angular 5 with RxJS

rxjs

typescript

angular

angular5