2

Estou tentando carregar uma lista em tela no meu navegador usando Observable, porém não estou tendo sucesso, esse é registro que existe na minha url;

inserir a descrição da imagem aqui

Essa é a classe de serviços

import { Http } from '@angular/http';
import { environment } from './../../environments/environment';
import { Restaurant } from './restaurant.model';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';



@Injectable()
export class RestaurantService {
  public url: String = 'http://localhost:3000/api/';

  constructor(private http: Http) {
  //  this.url = environment.url;
   }

   restaurants(): Observable<Restaurant[]> {
    return this.http.get(`${this.url}/restaurants`)
    .map(response => response.json())
  }

realizei um teste na classe de componente utilizando console.log como podem ver abaixo;

export class RestaurantsComponent implements OnInit {

  restaurants: Restaurant[]

  constructor(private restaurantService: RestaurantService){}

  ngOnInit() {
    this.restaurantService.restaurants()
    .subscribe(restaurants => {
    console.log('o valor é ' , this.restaurants = this.restaurants);
    })
  }

E o resultado está sendo esse;

o valor é  undefined

O que será que estou fazendo de errado?

0

3 Respostas 3

2

O problema e que voce esta usando o this duas vezes. this.restaurants != restaurants

.subscribe(restaurants => {
    this.restaurants =restaurants 
    console.log('o valor é ' , this.restaurants);
})
1

Verdade amigo, você teve um erro ai de lógica, ai tentar passar o valor retornado de restaurantes para sua variável this.restaurants no seu subscriber.

Ai seu output undefined é referente ao Watch do javascript de uma variável que não está sendo definida no loop do subscriber. Está sendo iterado sobre um valor indefinido, resultando assim em algo que não está sendo setado.

Resolvemos o caso usando a arrow function do modo correto

this.restaurants = restaurants

inserir a descrição da imagem aqui

2
  • Legal Philip, boa explicação. Me tira uma dúvida se possível. Quando o retorno do subscribe trouxer um objeto complexo para alimentar minha propriedade que também é de um tipo complexo (Objeto) eu preciso realizar a instanciação dela antes de receber o valor? Digo isso pois quando faço a interpolação de uma das propriedades do objeto que declarei e inicio o servidor ele sempre me retorna falando que o objeto é indefinido. Vc saberia o por que disso? 16/08/2018 às 13:02
  • Talvez vc já tenha conseguido ter feito, mas se puder abrir uma pergunta e mandar o link aqui, eu poderia verificar pra vc @JoséLuizGonzagaNeto 6/05/2019 às 20:48
0

O problema é que você está adicionando a variável do escopo do componente a ela mesma. Você tem que adicionar a resposta da API a variável restaurants.

Modifiquei seu método afim de ficar um pouco mais claro.

Errado -> this.restaurants = this.restaurants

export class RestaurantsComponent implements OnInit {

  restaurants: Restaurant[]

  constructor(private restaurantService: RestaurantService){}

  ngOnInit() {
    this.restaurantService.restaurants()
       .subscribe(resposta => this.restaurants = resposta);
    })
  }

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