Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Paginação

Olá, estou estudando o curso, porém estou implementando de uma forma diferente. Não estou consumindo a API disponibilizada neste módulo, mas sim a https://pokeapi.co/api/v2/pokemon , gostaria de saber como consigo criar uma paginação baseada nesta api, que me devolve um (next e previous) com a url da proxima página ou da anterior . Vlw !

5 respostas

Fala aí Marcos, tudo bem? Bom, basicamente vai precisar fazer uma pequena conta.

Sempre que o usuário carregar a tela, você vai chamar:

https://pokeapi-215911.firebaseapp.com/api/v2/pokemon?offset=0&limit=10

Veja que o offset está com o valor 0 e o limit com 10, dessa maneira, vamos pegar os primeiros 10 registros (primeira página).

No seu componente, você pode gravar em uma propriedade o número da página atual:

private paginaAtual = 0
private quantidadePorPagina = 10

E na busca, sempre pegue o paginaAtual e multiplique pelo numero de registros por página (no exemplo 10), esse será o valor do offset. Após a consulta ser realizada, incremente o paginaAtual em +1.

Exemplo:

// primeira página
paginaAtual = 0
offset = paginaAtual * quantidadePorPagina => 0
paginaAtual + 1 => 1

// segunda página
paginaAtual = 1
offset = paginaAtual * quantidadePorPagina => 10
paginaAtual + 1 => 2

// terceira página
paginaAtual = 2
offset = paginaAtual * quantidadePorPagina => 20
paginaAtual + 1 => 3

// etc..

A ideia é mais ou menos essa.

Espero ter ajudado.

Certo Matheus, esta também é uma solução, mas repare que eu não quero passar o offset nem o limit, pois, por padrão a API já traz. E eu quero usar isso, se tu ver no json, ele tem um valor (next) com a url da próxima página já. Eu gostaria de saber como paginar baseado nisso, sem fazer gambiarra ;d vlw.

solução!

Bom, o que você pode fazer é salvar em uma propriedade da classe o próximo e anterior, exemplo:

class Paginacao {
    private anterior = null
    private proximo = null

    ngOnInit() {
        this.meuServico.pegarDados().subscribe(resposta => {
            this.anterior = resposta.previous
            this.proximo = resposta.next
        })
    }

}

Algo nesse sentido, dai nas próximas chamadas você passa os valores de anterior ou proximo, que são o endereço da API.

Espero ter ajudado.

Opa Matheus, ajudou sim. Na verdade eu fiz assim, e depois vi a sua resposta, obrigado pelo tempo e atenção :D

Boa Marcos, fico feliz que tenha resolvido.

Abraços e bons estudos.