“可观察”类型上不存在属性“地图”<book[]> '</book[]>

Question

import { Injectable } from '@angular/core';
import { Book } from './book';
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import 'rxjs/add/operator/map';




@Injectable({
  providedIn: 'root'
})
export class BookService {

  constructor() { }


  BOOKS : Book[]=[
    
    {"id": 1, "name" : "JavaScript",  "price" :"100", "description": "javscript"},
    {"id": 2, "name" : "Angualr",  "price" :"200", "description": "Angualr"},
    {"id": 3, "name" : "Sql server",  "price" :"3000", "description": "Sql server"},
    {"id": 4, "name" : "Typescript",  "price" :"5000", "description": "Typescript"},
    
  ]


  getBooks(): Observable<Book[]>{
    return of(this.BOOKS);
  }

  getBook(id: number): Observable<Book>{
    return this.getBooks().map(books=> books.find(book=>book.id === id));
  }
}

Property 'map' does not exist on type 'Observable<Book[]>'.ts(2339)

Property 'map' does not exist on type 'Observable<Book[]>'.ts(2339)

Property 'map' does not exist on type 'Observable<Book[]>'.ts(2339)

Property 'map' does not exist on type 'Observable<Book[]>'.ts(2339)

Answer 1

I suppose you are using rxjs 6+ version (if no, please provide your version) so you need to use pipeable operators instead of directly call them over observable:

import {map} from 'rxjs/operators';

***

getBook(id: number): Observable<Book>{
  return this.getBooks()
    .pipe(map(books=> books.find(book=>book.id === id)));
}

---

https://rxjs.dev/guide/v6/pipeable-operators