Определение наблюдаемого в компоненте

Question

У меня есть следующий метод обслуживания в Angular 7:

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

    });

  }
}

Не должна ли переменная posts в TopPostsComponent быть:

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

Конечно, вы можете извлечь сопоставление для другого метода, чтобы его было легче читать. Или вы можете просто полностью удалить сопоставление (зачем копировать идентификатор и заголовок, а не использовать их напрямую?).

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,
    };
  }
}