Syntax Error in MAP Angular6

Question

I’m on a course of angular 4, but I’m using the 6, it makes me feel good, but once in a while there are some things that don’t work, I managed to fix most, but there’s one that makes me crazy that is the MAP in the search method. It would take a lot to go through with this because my TCC depends on this kkkk. Thanks already personal.

Top Component (where the search bar is)

import { Component, OnInit } from '@angular/core';
import { OfertasService } from '../ofertas.service';
import { Observable } from 'rxjs';
import { Oferta } from '../shared/oferta.model';
 public pesquisa(termoDaPesquisa: string): void{
    this.ofertas = this.ofertasService.pesquisaOferta(termoDaPesquisa)
    this.ofertas.subscribe(
      (ofertas: Oferta[]) => console.log(ofertas)
  )
  }

offer.service.ts (where is the logic of offers, where I will search)

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Oferta } from './shared/oferta.model';
import { URL_API } from './app.api'
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
public pesquisaOferta(termo: string): Observable<Oferta[]> {
        return this.http.get(`${URL_API}?descricao_oferta_like=${termo}`)
            .pipe(map((resposta: any) => resposta.json()))

    }

and the top html Component

<input type="text" class="form-control" placeholder="Pesquise por ofertas..." #termoDaPesquisa (keyup)="pesquisa(termoDaPesquisa.value)"/>

And I’ll show a screen print with the error!

EDIT: top.Component complete

import { Component, OnInit } from '@angular/core';
import { OfertasService } from '../ofertas.service';
import { Observable } from 'rxjs';
import { Oferta } from '../shared/oferta.model';

@Component({
  selector: 'xyz-topo',
  templateUrl: './topo.component.html',
  styleUrls: ['./topo.component.css'],
  providers: [OfertasService]
})
export class TopoComponent implements OnInit {

  public ofertas: Observable<Oferta[]>

  constructor(private ofertasService: OfertasService) { }

  ngOnInit() {
  }

  public pesquisa(termoDaPesquisa: string): void{
    this.ofertas = this.ofertasService.pesquisaOferta(termoDaPesquisa)
    this.ofertas.subscribe(
      (ofertas: Oferta[]) => console.log(ofertas)
  )
  }

}

Answer 1

There have been changes in the method map(), version of Angular 4, to 6. I believe that in your case the problem is that there is no more conversion to JSON in the method map().

Try modifying the method pesquisa() in the archive offers.service.ts.

public pesquisaOferta(termo: string): Observable<Oferta[]> {
    return this.http.get(URL_API + "?descricao_oferta_like=" + termo)
    .pipe(
        retry(10),
        map((response: Oferta[]) => {
            return response
        })
    )
}

Also try to pass the three parameters on your observer inscription.

   public pesquisa(termoDaBusca: string) : void {

    // Observavel
    this.ofertas = this.ofertasService.pesquisaOferta(termoDaBusca)

    // Observador
    this.ofertas.subscribe(
      (ofertas: Oferta[]) => {
        console.log(ofertas)
      },
      (error: string) => {
        console.log("Erro na pesquisa. Erro: " + error)
      }, () => {
        console.log("Termino do fluxo da stream")
      })
  }