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

Paginação não funciona!

Ao implementar a paginação das fotos recebidas do backend a pagina continua mostrando todas as fotos!

Service:

import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";

import { Photo } from "./photos";

const endereco = 'http://localhost:3000';

@Injectable({
    providedIn:"root"
})
export class PhotoService {

    private http: HttpClient;

    constructor(http: HttpClient) {
        this.http = http;
    }
    /*
    listFromUser(userName: string) {
        return this.http.get<Photo[]>(endereco + '/' + userName +'/photos');   // retorna dados do tipo Photo
    }
    */
    listFromUserPaginated(userName: string, page: number) {
        const params = new HttpParams()
            .append('page', page.toString());
        return this.http.get<Photo[]>(endereco + '/' + userName +'/photos', { params });   // retorna dados do tipo Photo
    }
}

Resolver:

import { Injectable } from "@angular/core";
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";

import { PhotoService } from "../photo/photo.service";
import { Photo } from "../photo/photos";

@Injectable({
    providedIn: 'root'
})
export class PhotoListResolver implements Resolve<Observable<Photo[]>>{   

    constructor(private service: PhotoService){  }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo[]> {
        const userName = route.params.userName;
        return this.service.listFromUserPaginated(userName, 1);
    }
}
4 respostas

Oi Rafael, tudo bem? O que acontece exatamente? As 12 fotos são exibidas? Seu código me parece incompleto...

Olá Wanderson, pelo contrário, ao invés de aparecer somente as 12 fotos na página exibe mais de 12! O que há de errado no código? No console não exibe nenhum erro.

solução!

Estranho, não vejo nenhum problema no seu código, está idêntico ao meu e o meu funciona. Você pode me disponibilizar seu projeto pra mim testar?

Posso sim, o projeto esta la no meu git!

https://github.com/rafamttz/angular-photos