Error with map operator

Question

I’m starting now with Angular 6.

When I tried to create a service to consume data from an api, the following error appeared:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';

import { CategoriaModel } from './categoria/categoria.model';
import { PRODUTOS_API } from './../../app.api';

@Injectable()
export class CategoriasService{
constructor(private http: Http){}

categorias(): Observable<CategoriaModel[]>{
    return this.http.get(`${PRODUTOS_API}/categorias`).map(response => response.json())
}

}

Error: Property 'map' does not exist on type 'Observable'.

I wonder what I’m doing wrong?

Answer 1

you need to import the MAP operator

    import { map } from "rxjs/operators";

    categorias(): Observable<CategoriaModel[]>{
        return this.http.get(`${PRODUTOS_API}/categorias`)
        .pipe(map(response => response.json()));
    }

Answer 2

If you use the Httpclient library instead of http you don’t need to map to json. Another thing tbm, vc can use the Generics and pass its Interface that the angular automatically infers the type of return of your Observable.

constructor(private httpClient: HttpClient){}

categorias(){
    return this.httpClient.get<CategoriaModel[]>(`${PRODUTOS_API}/categorias`)
   }
}

Answer 3

I managed to solve Eduardo Varga. Thanks for the guidelines.

The Component that receives the Injection should look like this:

ngOnInit() {
this.categoriasService.categorias().subscribe(categorias => this.categorias = categorias)

}