Estoy iniciando en el tema de Observable y me encontré con la siguiente situación:
En mi servicio.ts
obtengo una lista de libros:
URL_API = 'http://localhost:4000/books';
getBooksWithAuthorName() {
return this.http.get<Book[]>(this.URL_API + 'AuthorName');
}
En mi componente.ts
llamo al servicio:
bookList$: Observable<Book[]>;
constructor(public bookService: BookService) { }
ngOnInit(): void {
this.getBooksWithAuthorName();
}
getBooksWithAuthorName(){
this.bookList$ = this.bookService.getBooksWithAuthorName();
}
Acá mi componente.html
donde recorro la lista con un ngFor
:
<div *ngFor="let book of bookList$ | async">
<mat-card>
<mat-card-header>
<mat-card-title>{{ book.name }}</mat-card-title>
<mat-card-subtitle>{{ book.price | currency }}</mat-card-subtitle>
</mat-card-header>
<div class="crop-image">
<img [src]="linkImg(book.url_image)" alt="">
</div>
<mat-card-content>
<p>{{ book.description | slice:0:10 }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary">Agregar al carrito</button>
</mat-card-actions>
</mat-card>
</div>
Hasta acá todo funciona bien pero mi consulta es:
En el caso de que obtenga un error al obtener la lista en mi componente.ts
, quisiera poder informarlo. Intente hacerlo de esta manera:
getBooksWithAuthorName(){
// marca un error de esta forma
this.bookList$ = this.bookService.getBooksWithAuthorName()
.subscribe(
res => {
console.log('Todo correcto');
},
err => console.error('Hay un error al obtener la lista')
);
}
Pero Angular me informa del siguiente error:
Type 'Subscription' is missing the following properties from type 'Observable<Book[]>': _isScalar, source, operator, lift, and 6 more.