Home / Questions / 421030
Accepted
Claudio
Asked: 2022-01-16 10:53:59 +0800 CST 2022-01-16 10:53:59 +0800 CST

Error when making map in Observable with Angular

  • 772

With the service bookService.getBooksWithAuthorName()I load in my observable bookList$ all the books that I have in my db. Each book has a url_image property and I need to clean it, for this I use a map(I don't know if it's correct) in the bookList$ where I try to pass this url_image to the linkImg() function . But in the function getBooksWithAuthorName() it informs me the following error:Angular

Type 'Observable<string[]>' is not assignable to type 'Observable<Book[]>'. Type 'string[]' is not assignable to type 'Book[]'. Type 'string' is not assignable to type 'Book'.ts(2322)

herecomponent.ts

bookList$: Observable<Book[]>;

ngOnInit(): void {
   this.getBooksWithAuthorName();
}

getBooksWithAuthorName() {
    this.bookList$ = this.bookService.getBooksWithAuthorName()
    .pipe(
      map((books: Book[]) => books.map(book => this.linkImg(book.url_image))     
    ));
  }

  linkImg(urlImage) {
    // quito la palabra public
    let str = urlImage.replace(/public/g, '');
    // quito la barra '\'
    str = str.replace('\\', '');
    // invierto la barra en sentido a '/'
    str = str.replace('\\', '/');
    // console.log(str);
    const URL = 'http://localhost:4000/';
    const link = URL + str;
    // console.log(link);
    return link;
  }

here the servicebook.service.ts

getBooksWithAuthorName() {
   return this.http.get<Book[]>(this.URL_API + 'AuthorName');
}

angular

1 Answers

  1. Best Answer

    It is because the following is returning a string that is the book.url.image:

     map((books: Book[]) => books.map(book => this.linkImg(book.url_image))

    You need to return the object, the correct thing would be:

     map((books: Book[]) => books.map(book => { 
   return {
     ...book , 
     url_image: this.linkImg(book.url_image)
   } 
 })
    • 2