Implementation of Angled list with problem

Question

Implementation of Angled list with problem

Navigation

#1 by (1 votes)

0

I do not understand what's going wrong with my code, the code is correct, even so I can not list the data from my MongoDb bank.

This is my 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>

This is my component class;

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);
      }
    );
  }


}

And this is the proof that is listing, but the data does not appear on screen;

Cananyoneseetheproblem?please!Thisistheserviceclass;

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()exportclassRestaurantService{publicurl:string;constructor(private_http:Http){this.url=environment.url;}getRestaurants(){returnthis._http.get(this.url+'/admin-painel/listas').map(res=>res.json());}}

Mybackendistheexpressnodeitisrunningonmypostman;

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

Mydatalist;

angular

asked by anonymous 13.08.2018 / 14:41

1 answer

Integrate LTE Admin Template in Angular 6 Questions to resize with ASP.Net application

score 1 · Accepted Answer

The problem is with your component:

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

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

Your API returns only one list, with no grouping attribute. Therefore, when trying to get the attribute restaurants of the response, it gives error, because the attribute does not exist.

For this method to work, your API should return the following:

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

Yes, the restaurants property would be available.

As a suggestion, I recommend also reversing the logic of your if. It would look like this:

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