Boa Tarde Estou consumindo uma api (pokemon), Porém não funciona,
PokeListagemComponent.html:6 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Meu component :
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<any>;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.listar();
}
listar() {
this.apiService.listar()
.subscribe(dados => this.pokemon = dados);
}
}
Meu template :
<ul>
<li *ngFor="let p of pokemon" >
{{p.url}} {{p.name}}
</li>
</ul>
Serviço:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
PokeUrl='http://pokeapi.salestock.net/api/v2/pokemon';
constructor(private http: HttpClient) { }
listar() { //lista os filmes
return this.http.get<any[]>(`${this.PokeUrl}`);
}
}