-1

Tenho uma API no back (SpringBoot) que já provê uma paginação própria, mas eu não consigo receber essa paginação em um array no front (angular) pra mortrar a lista em uma tabela, além de também não conseguir sincronizar a paginação do back com o ngx-pagination do front. Esse é o serviço do back que retorna a paginação:

public Page<City> findAll(){

   PageRequest pageRequest = PageRequest.of(
                0,
                10,
                Sort.Direction.ASC,
                "name");

   return cityRepository.findAll(pageRequest);
}

Agora no front (angular) -> Temos a seguinte interface:

export interface City {
  id: number,
  nome: string,
  uf: number,
  ibge: number,
  lat_lon: string,
  location: string;
}

O método do service:

getAll(): Observable<City[]>{
    return this.http.get<City[]>(this.api);
  }

E por fim o .ts do componente:

export class CitiesComponent {

  cities:City[] = []

  constructor( private cityService: CitiesService ){
    this.listar();
  }

  listar(){

    this.cityService.getAll().subscribe((cities: City[]) => {
      this.cities = cities;
      console.log(cities);
    });
  }
}

1 Resposta 1

0

Para sincronizar a paginação do back-end com o ngx-pagination no front-end, você precisará incluir informações adicionais sobre a paginação no retorno da sua API. Isso geralmente inclui informações como o número total de páginas, o número de elementos por página e o número atual da página.

Você pode adicionar essas informações na sua classe City, ou criar uma nova classe para armazenar essas informações.

Por exemplo, você pode adicionar as seguintes propriedades na sua classe City:

export interface City {
  id: number,
  nome: string,
  uf: number,
  ibge: number,
  lat_lon: string,
  location: string;
  totalPages: number,
  totalElements: number,
  pageNumber: number,
  size: number,
}

Em seguida, você pode modificar o método findAll() na sua classe CityRepository no back-end para incluir essas informações adicionais no retorno da API:

public CityDTO findAll(Pageable pageable){
    Page<City> cities = cityRepository.findAll(pageable);
    CityDTO cityDTO = new CityDTO();
    cityDTO.setCities(cities.getContent());
    cityDTO.setTotalPages(cities.getTotalPages());
    cityDTO.setTotalElements(cities.getTotalElements());
    cityDTO.setPageNumber(cities.getNumber());
    cityDTO.setSize(cities.getSize());
    return cityDTO;
}

E finalmente, você precisará modificar o método getAll() no seu service do front-end para processar essas informações adicionais e passá-las para o componente ngx-pagination.

getAll(page: number = 0, size: number = 10): Observable<CityDTO>{
    return this.http.get<CityDTO>(`${this.api}?page=${page}&size=${size}`);
}

E no componente você pode utilizar as informações da paginação retornadas para configurar o ngx-pagination.

export class CitiesComponent {

  cities:City[] = []
  totalPages: number;
  totalElements: number;
  pageNumber: number;
  size: number;

  constructor( private cityService: CitiesService ){
    this.listar();
  }

  listar(page: number = 0, size: number = 10){

    this.cityService.getAll(page, size).subscribe((cityDTO: CityDTO) => {
      this.cities = cityDTO.cities;
      this.totalPages = cityDTO.totalPages;
      this.totalElements = cityDTO.totalElements;
      this.pageNumber = cityDTO.pageNumber;
      this.size = cityDTO.size;
    });
  }
  pageChanged(event: any): void {
    this.listar(event.page - 1, event.itemsPerPage);
  }
}

Nessa parte, você está atualizando os valores das propriedades totalPages, totalElements, pageNumber e size com os valores retornados pela API. E no método pageChanged você esta passando a pagina e o numero de elementos por pagina para a listagem, e assim você pode controlar a paginação com ngx-pagination.

Espero que isso ajude a sincronizar a paginação do back-end com o ngx-pagination no front-end.

2
  • Sua solução funcionou perfeitamente pra resolver o meu problemas, porém eu queria saber se não existe uma forma mais direta de receber no angular, um classe específica para paginação ou algo do tipo existe? 17/01 às 23:30
  • @LucasDutra, crie a pergunta lá para que outros possam te ajudar. 19/01 às 13:48

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 .