Вернуться при подписке. ... Тип "Подписка" отсутствует следующие свойства

Question

Я подписываюсь на ответ от службы Angular:

  books: BookModel[] = [];

  constructor(private bookService: BookService) { }

  ngOnInit() {

    this.books = this.getBooks();

  }

  getBooks(): BookModel[] {

    return this.bookService.getByCategoryId(1).subscribe((payload: Payload<GetBooksResponse>) => {

      return payload.result.map((response: GetBooksResponse) => { 

        return {
          id: response.id, 
          title: response.title
        };

      });

    });

  }

Когда я добавляю return к this.bookService, например, return this.bookService, я получаю ошибку:

Type 'Subscription' is missing the following properties from type 'BookModel[]': length, pop, push, concat, and 26 more.

Как я могу использовать возврат, чтобы сделать эту работу?

Обновление: BookModel:

export interface BookModel {
  id: number;
  title: string;
}

Answer 1

Вы пытаетесь назначить подписку в массив, поэтому вы получаете следующие ошибки:

Я сделал этот пример, используя Observables и асинхронный канал, надеюсь, он вам поможет:

TS:

 /***
   *  books$ Observable is looking to any response
   *  of the method getByCategoryId. It is being displayed with async pipe in the view.
   */
  books$ = this.bookService.getByCategoryId(1);

  books: BookModel[];

  constructor(private bookService: BookService) { }

  ngOnInit() {
    this.getBooks();
  }

  /***
   *  Getbooks method does not return anything, 
   *  after the subscribe, a map is assigning the value to the books propertie
   *  which is in being render in the view without async pipe. 
   */
  getBooks(): void {
    this.bookService.getByCategoryId(1)
      .subscribe((payload: Payload<GetBooksResponse>) => {

        this.books = payload.result.map((response: GetBooksResponse) => {
          return <BookModel>{
            id: response.id,
            title: response.title
          };
        });

      });
  }

HTML:

<div *ngFor="let book of (books$ | async).result">
    {{ book | json }}
</div>

<br/>
<h3> Not Using | async </h3>

<div *ngFor="let book of books">
  {{ book | json }}
</div>

Попробуйте онлайн по этой ссылке: https://stackblitz.com/edit/angular-k9pzmw

Если вы спросите меня, какой подход лучше, я бы сказал, что это зависит.

Асинхронный канал с observable - мой любимый способ показывать только «тупые данные» в представлении, но вы должны оставить решение для подписки, если вам нужна эта информация в компоненте для чего-либо еще.

Answer 2

Вам необходимо вернуть

getBooks(): Observable<BookModole[]> { ... }

тогда:

this.getBooks().subscribe(res => { this.books = res; });