Erro ao consumir api com Angular

31 de maio de 2018 2 respostas

marcos1995 31 de maio de 2018

Boa Tarde pessoal, estou consumindo uma api com Angular, porem quando executo no browser, aparece esse erro :
Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

2 Respostas

marcos1995 31 de mai. de 2018

Meu template :

{{p.url}} {{p.name}}

Component .ts :

import { HttpClient } from ‘@angular/common/http’;

import { ApiService } from ‘./…/api.service’;

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-poke-listagem’,

templateUrl: ‘./poke-listagem.component.html’,

styleUrls: [’./poke-listagem.component.css’]

})

export class PokeListagemComponent implements OnInit {

pokemon: Array;

constructor(private apiService: ApiService) { }

ngOnInit() {

this.listar();

}

listar() {

this.apiService.listar()

.subscribe(dados => this.pokemon = dados);

}

}

marcos1995 31 de mai. de 2018

Service.ts:

import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;

@Injectable({

providedIn: ‘root’

})

export class ApiService {

PokeUrl=‘http://pokeapi.co/api/v2/pokemon/’; //pokemon

constructor(private http: HttpClient) { }

listar() { //lista os pokemon
return this.http.get<any[]>(${this.PokeUrl});
}

}

Criado 31 de maio de 2018

Ultima resposta 31 de mai. de 2018

Respostas 2

Participantes 1

2 Respostas

Topicos relacionados