0

Eu não entendo o que esteja acontecendo de errado com meu código, o código está correto, mesmo assim não consigo listar os dados do meu banco MongoDb.

Esse é meu HTML

<div class="col-lg-12">
  <h3>{{ title }}</h3>
<table class="table table-hover">
    <thead class="thead-default">
      <tr>
        <th>Nome</th>
        <th>Categoria</th>
        <th>Ação</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let restaurant of restaurants">
          <td>{{ restaurant.name }}</td>
          <td>{{ restaurant.category }}</td>
          <td>
            <a  class="btn btn-sm btn-success">
              <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Ver
            </a>
            <a class="btn btn-sm btn-primary">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                Editar
            </a>
            <a  class="btn btn-sm btn-danger">
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Deletar
            </a>
          </td>
        </tr>
    </tbody>
</table>
</div>

Essa é minha classe de componente;

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '../../../../../node_modules/@angular/router';
import { RestaurantService } from '../../services/restaurant.service';
import { Restaurant } from '../../models/restaurant';

@Component({
  selector: 'mt-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {


  public title: string;
  public restaurants: Restaurant[];
  public numbers = new Array(10);
  public token;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _restaurantService: RestaurantService
  ) {
      this.title = 'Adicionar Restaurantes';

    }

  ngOnInit() {
    this.getRestaurants();
  }

  getRestaurants() {
    this._restaurantService.getRestaurants().subscribe(
      response => {
        if (!response.restaurants) {

        } else {
          this.restaurants = response.restaurants;
        }
      },
      error => {
        console.log(<any>error);
      }
    );
  }


}

E isso é a prova que está listando, mas não aparece os dados em tela;

inserir a descrição da imagem aqui

Alguém consegue enxergar o problema? por favor! Essa é a classe de serviços;

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { environment } from 'environments/environment';


@Injectable()
export class RestaurantService {

  public url: string;


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




    getRestaurants(){
      return this._http.get(this.url+'/admin-painel/listas').map(res => res.json());
    }


}

Meu back-end é o node express ele está funcionando no meu postman;

router.get('/admin-painel/listas', controller.get);

Minha lista de dados;

inserir a descrição da imagem aqui

11
  • Acho que seus dados não estão em response.restaurants. Tenta dar um console.log(response) e veja se lista diretamente os dados. Commented 13/08/2018 às 12:47
  • fica como undefine, por favor como faço para corrigir?
    – user10264
    Commented 13/08/2018 às 12:50
  • @ladyband se está dando undefined os dados não estão chegando até ali. Podes colocar o código do teu service por favor? Commented 13/08/2018 às 13:01
  • Acabei de colocar, poderia dar uma olhada por favor?
    – user10264
    Commented 13/08/2018 às 13:05
  • 1
    show! Vou formular uma resposta explicando o porque do erro
    – Pedro
    Commented 13/08/2018 às 13:30

1 Resposta 1

0

O problema está no seu componente:

 getRestaurants() {
    ...
      response => {
        if (!response.restaurants) {

        } else {
          this.restaurants = response.restaurants; 
        }
      },
   ...

A sua API retorna somente uma lista, sem nenhum atributo agrupador. Por isso, ao tentar pegar o atributo restaurants da response, dá erro, pois o atributo não existe.

Para esse método funcionar, sua API deveria retornar o seguinte:

"restaurants" : [
    {
      "chave" : "valor",
      "chave2" : "valor2",
    },    
    { 
      "chave2" : "valor3",
      "chave3" : "valor4",
    }   
]

Aí sim, a propriedade restaurants estaria disponível.

Como sugestão, recomendo também inverter a lógica do seu if. Ficaria assim:

getRestaurants() {
    this._restaurantService.getRestaurants().subscribe(
      response => {
        if (response) {
            this.restaurants = response;
        }
      },
      error => {
        console.log(<any>error);
      }
    );
  }

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