Estou montando uma aplicação que deve criar uma lista de Pokemons, porém estou com os seguintes problemas:
A minha tabela que deveria exibir a lista de Pokemons não exibe nada. Quando faço o console.log do meu array com o resultado do meu método ele exibe: [object Object].
O método que deveria fazer a lista de Pokemons getPokemons faz um push em um array chamado pokemonsList e é esse pokemonList que retorna o [object Object].
Sei que esse [object Object] é uma string, então tentei fazer um JSON.stringify para converter em JSON, porém mesmo assim não funcionou.
O que eu achei interessante é que quando faço no OnInit o console.log só do resultado do meu service, ele retorna o objeto certinho.
Como posso resolver isso? Obrigado!
HTML
<table class="table">
<thead class="bg-warning">
<tr>
<th scope="col">Nome:</th>
<th scope="col">Url: </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pokemon of pokemonsList">
<td>{{pokemon.name}}</td>
<td>{{pokemon.url}}</td>
</tr>
<tr>
</tbody>
ListaPokemonsComponent
import { Component, OnInit } from '@angular/core';
import { PokemonModel } from '../../interfaces/pokemon-model'
import { PokemonsService} from '../../services/pokemons.service'
@Component({
selector: 'app-lista-pokemons',
templateUrl: './lista-pokemons.component.html',
styleUrls: ['./lista-pokemons.component.css']
})
export class ListaPokemonsComponent implements OnInit {
pokemon: PokemonModel = new PokemonModel();
pokemonsList: Array <any> = new Array();
constructor(private pokemonService: PokemonsService) { }
ngOnInit(): void {
this.listarPokemons();
this.pokemonService.getPokemons()
.subscribe((response: any) => { console.log(response); } );
}
listarPokemons(){
this.pokemonService.getPokemons()
.subscribe(resultado => {
this.pokemonsList.push(resultado);
JSON.stringify(this.pokemonsList);
console.log('Lista de Pokemons: ' + this.pokemonsList);
} );
}
}
PokemonsService
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PokemonModel } from '../interfaces/pokemon-model';
import { environment } from '../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class PokemonsService {
constructor(private http: HttpClient) { }
getPokemons(): Observable<any>{
return this.http.get(`${environment.pokemonApiUrl}/pokemon?limit=10`);
}
}