在组件中定义一个 Observable

Question

我在Angular7有如下服务方式：

public getTopPosts(): Observable<Payload<PostResponse>> {

  return this.httpClient.get<Payload<PostResponse>>('/top-posts');

}

在我拥有的组件上：

export class TopPostsComponent implements OnInit {

  posts: PostModel[] = [];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getTopPosts().subscribe((payload: Payload<PostResponse>) => {

      this.posts = payload.map((response: PostResponse) => { 
        return {
          id: response.id, 
          title: response.title
        };
      });

    });

  }
}

TopPostsComponent 中的 posts 变量不应该是：

posts$: Observable<PostModel>[] = [];

但是我得到了错误：

Type '{ id: number; title: string; }[]' is not assignable to type 'Observable<PostModel>[]'.
Type '{ id: number; title: string; }' is missing the following properties from type 'Observable<PostModel>': _isScalar, source, operator, lift, and 6 more."

使用时：

this.posts$ = payload.map((response: PostResponse) => { 
  return {
    id: response.id, 
    title: response.title
  };
});

正确的做法是什么？

Answer 1

您不能使用数组初始化可观察对象。

posts$: Observable<PostModel>[] = [];

试试这个：

posts$ = this.postService.getTopPosts().pipe(map(items => items.map(item => ({id: item.id, title: item.title}))));`

当然，您可以将映射提取到不同的方法以使其更易于阅读。或者您可以完全删除映射（为什么要复制 id 和 title 而不是直接使用它们？）。

export class TopPostsComponent implements OnInit {

  posts$: Observable<PostModel[]>;

  constructor(
    private postService: PostService,
  ) { }

  ngOnInit() {
    this.posts$ = this.postService.getTopPosts().pipe(
      map(items => items.map(item => this.responseItemToModel(item)))
    );
  }

  private responseItemToModel(item: PostResponse): PostModel {
    return {
      id: item.id,
      title: item.title,
    };
  }
}

在组件中定义一个 Observable

Defining an Observable in a Component

angular

angular7