2

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.

2 respuestas 2

2

Agrega un pipe() al observable para manejar el error.

this.bookList$ = this.bookService.getBooksWithAuthorName()
.pipe(
     catchError( error => {
       // manejo de error
       console.log(error)
       return of([])
     })
    )
1
  • Gracias Lobos funciona!
    – Claudio
    Commented el 16 nov. 2020 a las 18:24
1

otra forma de realizar el manejo de errores puede ser parecido a la forma que propusiste. Ademas es recomendable que la variable no sea tipo Observable para que puedas manipular el objeto fácil y directamente.

public bookList$: Book[];

getBooksWithAuthorName(){
  this.bookService.getBooksWithAuthorName()
  .subscribe(
    res => {
      this.bookList$ = res;
      console.log('Todo correcto');
    },
    err => console.error('Hay un error al obtener la lista')
  );
}
2
  • Gracias @David Yepes, de la forma que muestras, en el *ngFor para recorrer bookList$, no puedo utilizar el pipe async, tengo q quitarlo para que muestre la lista sin problemas. Tampoco se muy bien cual seria la diferencia entre utilizar o no utilizar el pipe async.
    – Claudio
    Commented el 17 nov. 2020 a las 16:53
  • 1
    Async Pipes se suele usar para comportamientos asíncronos muy complejos donde estas suscrito a ese observable pendiente de modificaciones, no se si es tu caso, pero si lo quieres quitar simplemente inicializas la variable bookList$: Book[] = []; y quitas el async en el HTML, con eso debería funcionar. Commented el 17 nov. 2020 a las 18:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.