angular - Returnera vid prenumeration. ... Typen 'Subscription' saknar följande egenskaper

Jag prenumererar på ett svar från en Angular-tjänst:

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

      });

    });

  }

När jag lägger till return till this.bookService, t.ex. return this.bookService får jag felet:

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

Hur kan jag använda return för att få detta att fungera?

Uppdatering: BookModel:

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

Svar #1

Du försöker tilldela en prenumeration till en matris, det är därför du får dessa fel:

Jag gjorde detta exempel med Observables och async-pipe, jag hoppas det hjälper dig:

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>

Prova online på denna länk: https://stackblitz.com/edit/angular-k9pzmw

Om du frågar mig vilken metod som är bättre, skulle jag säga att det beror.

Async-pipe med observable är min favorit för att bara visa 'dum data' i vyn, men du bör behålla prenumerationslösningen om du behöver denna information i komponenten för något annat.

Svar #2

Du behöver återvända

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

då :

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

Relaterade artiklar