Question

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

我想过滤这些帖子。我在RxJS中遇到了.pipe和.filter的问题。

我正在努力：

从api/posts检索in-memory-api帖子列表，当与http.get一起使用时，它会返回Observable<Post[]>
遍历Post中的每个Observable<Post[]>并对其进行过滤，以便它只选择ID为1的每个帖子（只有一个标识为1的帖子存在）。
登录控制台任何错误或功能是否成功

filter未选择Post[]数组中的每个单独部分，而是选择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

Observables是值的流。您在对RXJS说，您将收到Post[]的流，换句话说，Array<Post>。

如果您想过滤数组，可以执行以下操作：

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

使用带有RxJS的Angular 5可以观察带过滤器的数组

1 个答案: