1

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



}

4 Respostas 4

1

Tenta inicializar a variável

pokemon: Pokemon[]= []

ou

 pokemon: any[]= []
1

o retorno da api que está sendo usada retorna um objeto e o ngFor suporta apenas objetos inteiráveis como os arrays

Abaixo segue um exemplo do retorno da url http://pokeapi.salestock.net/api/v2/pokemon

{
    "count": 811,
    "previous": null,
    "results": [
        {
            "url": "http://pokeapi.salestock.net/api/v2/pokemon/1/",
            "name": "bulbasaur"
        },
       // ....
        {
            "url": "http://pokeapi.salestock.net/api/v2/pokemon/20/",
            "name": "raticate"
        }
    ],
    "next": "http://pokeapi.salestock.net/api/v2/pokemon/?offset=20"
}

nesse caso a função listar deve ser reescrita

listar() {
 this.apiService.listar()
  .subscribe(dados => this.pokemon = dados.results);
}
1

Por mais que o subscribe, seja uma espécie de retorno do seu Listar(), recomendo que nesse contexto não use o subscribe e sim diretamente o Observable com o pipe Async.

pokemon$: Observable<any>;

No seu método Listar, use:

listar() {
    this.pokemon$ = this.apiService.listar()
  }

No DOM, faça:

<ul>
<li *ngFor="let p of pokemon$ | async" >
  {{p.url}}  {{p.name}}
</li>
</ul>

É uma melhor prática.

0

O problema ocorre porque a variável pokemon é undefined durante a renderização do seu template. Repare que apesar de você acionar sua API para preencher esta variável, a conclusão da requisição leva um certo tempo. Antes de concluir a requisição, o template já foi renderizado e gerou o problema porque a variável ainda é undefined. Veja que é um processo assíncrono.

Para resolver o problema apenas inicialize sua variável ou aplique um *ngIf para verificar se a variável pokemon já foi preenchida:

// Inicialize sua variável com um Array vazio
pokemon = [];

ou:

<ul *ngIf="pokemon">
    <li *ngFor="let p of pokemon" >
        {{p.url}}  {{p.name}}
    </li>
</ul>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .