0

Essa abaixo é uma breve explicação.

Ao clicar no registro em tela navegador não consigo carregar os registros de acordo com o ID.

Esse abaixo é uma aplicação detalhada;

Veja o arquivo gif

inserir a descrição da imagem aqui

Você pode perceber que existem dois registros sendo carregados e ao clicar nos registros ele consegue carregar na URL o ID do registro, ao visualizar o console você percebe que ele lista os registros do banco que são somente dois mesmo.

O problema é que ao colocar na página {{ restaurant?.name }} ele não imprime na tela o valor do banco.

Não sei o que estou fazendo de errado, essa é minha classe de serviços;

 restaurantById(id: string): Observable<Restaurant> {
    return this.http.get(`${this.url}/restaurants/${name}`)
    .map(response =>  response.json().restaurants)
    .catch(ErrorHandler.handlerError)
  }

Essa é minha classe do componente de acordo com pagina web.

ngOnInit() {
    this.restaurantService.restaurantById(this.route.snapshot.params['id'])
    .subscribe(restaurant =>  this.restaurant = restaurant)
}

ESSE É MEU REPOSITÓRIO

desculpe ter colocado em caixa alta, porque as vezes as pessoas não percebem que tenho colocado o link do meu repositório.

A pagina está dentro do pacote restaurant-detail e o serviço é o arquivo restaurant.service.ts

Estarei esperando um retorno, preciso muito de ajuda.

REPOSTA DO SERVIDOR

inserir a descrição da imagem aqui

7
  • Não deveria ser ${id} aqui?? this.http.get(${this.url}/restaurants/${name}` 2/07/2018 às 10:34
  • Se eu colocar o como está sugerindo ele não carrega os registro do banco na classe de componentes
    – user10264
    2/07/2018 às 10:47
  • Mas aí tem que ver o retorno da API tbm, e ajustar conforme necessário... O que está acontecendo é que você provavelmente está recebendo um array de restaurantes (vide response.json().restaurants), mas tenta exibir um só. 2/07/2018 às 11:11
  • Na sua classe de serviço onde tem .map(response => response.json().restaurants) não deveria ser? .map(response => response.json())
    – Marconi
    2/07/2018 às 11:13
  • 1
    Tenta assim: restaurantById(id: string): Observable<Restaurant> { return this.http.get(${this.url}/restaurants/${id}) .map(response => response.json()) .catch(ErrorHandler.handlerError) }
    – Marconi
    2/07/2018 às 11:21

2 Respostas 2

2

O seu método restaurantById está ignorando o parâmetro id, e usando uma variável que não existe (name). Desta forma ele vai fazer a requisição em /restaurants/ e listar todos os restaurantes.

Isto fica evidenciado pela necessidade de usar o .restaurants no método map:

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get(`${this.url}/restaurants/${name}`)
  .map(response =>  response.json().restaurants)
  .catch(ErrorHandler.handlerError)
}

De acordo com a resposta do servidor postada, a implementação ideal seria:

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get(`${this.url}/restaurants/${id}`)
  .map(response =>  response.json().restaurant)
  .catch(ErrorHandler.handlerError)
}
5
  • Deu para ajudar em partes, porque agora ele não carrega no console do navegador todos os registros ele carrega somente aquele que foi clicado, porém quando coloco {{ restaurants?.name}} não parece o registro em tela.
    – user10264
    2/07/2018 às 11:35
  • Tem como mostrar como está vindo a resposta do servidor? 2/07/2018 às 11:37
  • acabei de atualizar a postagem, veja já por favor
    – user10264
    2/07/2018 às 11:41
  • @wladyband atualizei a reposta com o mapeamento necessário. 2/07/2018 às 11:43
  • funcionou, muito obrigado.
    – user10264
    2/07/2018 às 12:12
0

Tenta assim:

Service

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

restaurantById(id: string): Observable<Restaurant> {
  return this.http.get<Restaurant>(`${this.url}/restaurants/${id}`)
  .pipe(map(response =>  response.restaurant),
       catchError(ErrorHandler.handlerError)
  )      
}

Component

constructor(protected route: ActivatedRoute)

this.route.params.pipe(
        map(params => params['id']),
        switchMap(id=> this.restaurantService.restaurantById(id))
       .subscribe(restaurant => this.restaurant = restaurant );
5
  • poderia por favor me dizer as importações para as variaveis "map", "switchMap" e "params" ?
    – user10264
    2/07/2018 às 11:38
  • está gerando essa mensagem de erro: TypeError: operators_1.switchMap(...).subscribe is not a function at RestaurantDetailComponent.ngOnInit (restaurant-detail.component.ts:28) at checkAndUpdateDirectiveInline (core.js:12411) at checkAndUpdateNodeInline (core.js:13935) at checkAndUpdateNode (core.js:13878) at debugCheckAndUpdateNode (core.js:14771) at debugCheckDirectivesFn (core.js:14712) at Object.eval [as updateDirectives] (RestaurantDetailComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    – user10264
    2/07/2018 às 12:00
  • Estou usando o rxjs 6 se vc esta usando o 5 são os mesmos operadores, so muda imports e invés de colocar dentro do pipe vc chama com .map inves de pipe(map) 2/07/2018 às 12:04
  • Muito obrigado pelo esforço de está tentando me ajuda, sou muito grato.
    – user10264
    2/07/2018 às 12:12
  • Presta atenção que no seu serviço vc esta chamando response.restaurants 2/07/2018 às 12:13

Você deve fazer log-in para responder a esta pergunta.