0

Eu criei um service para bater em minha API e retornar todos os pedidos de acordo com certo tipo params.

Quando eu tento atribuir o retorno ao meu component, ele não me retorna uma array de resultados, me retorna um subscriber.

Service

 baseUrl = 'http://localhost:3001';
 constructor(private http: HttpClient) { }
 getPedidos = (tipo: Pedidos): Observable<any> => this.http.get(`${baseUrl}/pedidos?tipo=${tipo}`);

Component ts

ngOnInit() {
    this.pratosPrincipais = this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .subscribe(pedido => pedido)

Ao atribuir a variável, é esse o valor atribuído:

inserir a descrição da imagem aqui

Logo após isso, eu passo o valor via Input para outro componente.

<app-expansion-panel title="Prato Principal" [data]=pratosPrincipais></app-expansion-panel>

Componente expansion panel ts

@Input() data;

tentei dar subscribe em data, mas apresenta erro que não é uma função. Testei a api e esta funcionando normalmente.

O que estou esquecendo?

3 Respostas 3

0

Obervables são como uma stream de dados que emitem eventos, portanto pra obter os dados destes eventos é preciso inscrever-se na stream, o objeto retornado dessa stream é um subscriber (que é o objeto que está sendo associado ao pratosPrincipais).
No seu caso o código está inscrito mas quando a stream emite next (que é quando a requisição retorna) sua função que escuta ao next não altera nada seu escopo local, no caso seu código precisa associar o valor no escopo fora da stream:

ngOnInit() {
  this.pedidoService.getPedidos(1)
    .subscribe(pedido => this.pratosPrincipais = pedido)
}

Para deixar mais claro, o Subscriber é o ponto no qual o encanamento da stream enviará os dados, é preciso de uma ação sempre que algo for recebido naquele encanamento.

Sim, observables são complicadas no início mas na prática é mais fácil, veja os exemplos da api :)

5
  • o erro final é no seu bind [data]="pratosPrincipais"
    – user201180
    Commented 2/09/2020 às 20:39
  • eu tentei da forma que me disse, mas me retornou [object object] Commented 2/09/2020 às 20:48
  • não é essa a response?
    – user201180
    Commented 2/09/2020 às 20:58
  • deveria me retornar um array de objetos Commented 2/09/2020 às 21:58
  • o array de objetos é o [object Object], deve ser descontruído dentro da função subscribe antes de associar aos pratosPrincipais
    – user201180
    Commented 11/10/2020 às 17:09
0

Sabemos que o método HttpClient.get() serve para buscar dados de um servidor, mesmo que pareça redundante é uma informação relevante. O método assíncrono envia uma solicitação HTTP e retorna um Observable que emite os dados solicitados quando a resposta é recebida. O método get() contem dois argumentos: a URL e um objeto de opções, porém em sua solicitação tem apenas a URL, passe o segundo parâmetro para sua API para que possa receber a resposta desejada utilizando: {observe: 'response'}.

Ou seja:

getPedidos = (tipo: Pedidos): Observable<any> => this.http.get(`${baseUrl}/pedidos?tipo=${tipo}`, {observe: 'response'});

Desta forma o observe especifica qual tipo de resposta deseja obter.

Você poderá encontrar mais informações a respeito dos tipos de retornos no site oficial do Angular: https://angular.io/guide/http#requesting-data-from-a-server

-1

Nesse caso a sua variável pedido aparentar ser outro Obervable....

Você poderia fazer da seguinte forma:

ngOnInit() {
    this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .subscribe(pedido => this.pratosPrincipais = pedido);

Ou outra opção seria converter para Promise e passar a utilizar o async/await

 async ngOnInit() {
   this.pratosPrincipais = await this.getPedidos(1);
  }

  private getPedidos = (tipo) =>
  this.pedidoService.getPedidos(tipo)
  .toPromise()
3
  • Ele me retorna "undefined" se eu fizer dessa forma. Commented 2/09/2020 às 19:36
  • private getPedidos = (tipo) => this.pedidoService.getPedidos(tipo) .subscribe(pedido => this.pratosPrincipais = pedido); ainda que faça dessa forma? Commented 2/09/2020 às 19:49
  • Mesmo dessa forma, tentei até retornar todo o meu resultado da api e nada Commented 2/09/2020 às 20:40

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .