2

Esta é a web api:

[Route("{pagina:int}/{tamanhoPagina:int}")]
        [HttpGet]
        public IHttpActionResult UsuarioPaginado(int pagina = 1, int tamanhoPagina=10)
        {

            var _aluno = iAluno.Listar()
                        .Where(x => x.Nome != string.Empty)
                        .OrderBy(y => y.Nome).Skip(tamanhoPagina * (pagina - 1)).Take(tamanhoPagina);
            return Ok(_aluno);
        }

Como fazer na minha aplicação Angular saber quando é a página 2 ou página 3 ou 4 e assim por diante?

Abaixo está o formulário e o usuário precisa navegar para a Próxima ou Anterior: inserir a descrição da imagem aqui

A classe abaixo é a Service onde faço a requisição da Web Api:

@Injectable({
  providedIn: 'root'
})
export class UsuarioService {

  constructor(private http: HttpClient) { }

    getListaUsuarios(): Observable<Usuario[]> {
      const url = `${environment.apiUrl}`;
      return this.http.get<Usuario[]>(url);
    }

    getListaAlunoPaginado(pagina: number, tamanhoPagina: number): Observable<Usuario[]> {
      const url = `${environment.apiUrl}/${pagina}/${tamanhoPagina}`;
      return this.http.get<Usuario[]>(url)
    }
}

E está é a classe do Componente:
Obs.: no trecho do código onde this.pagina = 1 o valor está fixo e não pode, tem que ser um valor dinâmico conforme o usuário vai clicando em avançar e ai está minha dúvida: Como implementar esse valor dinâmico ?

export class ListarUsuarioComponent implements OnInit {
  public usuarios: Usuario[];
  public pagina: number;
  public tamanhoPagina: number;

  constructor(private usuarioService: UsuarioService) { }

  ngOnInit() {
    this.getListaAlunoPaginado(1,10);
  }

  getListaAlunoPaginado(pagina: number, tamanhoPagina: number) {
    this.usuarioService.getListaAlunoPaginado(pagina, tamanhoPagina)
      .subscribe((dados: Usuario[]) => {
        this.usuarios = dados,
        this.pagina = 1,                  <<--Aqui o valor está fixo, mas tem que ser um valor dinâmico conforme o usuário vai Clicando em Próximo.
        this.tamanhoPagina = 10;
      }, () => { 'Erro'; });
  }

}

2 Respostas 2

1

Olha, se o que você quer é somente colocar os números das páginas e setar quantidade por ela, existe uma opção bem simples de fazer isso, que é o Angular DataTables, fazer no braço, vc vai perde muito tempo pesquisando e é um pouco complexo de fazer, eu fiz, mas se for pra eu explicar, teria que ser passo a passo é vai ficar muito grande, então.

Use o Angular DataTables https://l-lin.github.io/angular-datatables/#/basic/with-options nesse link tem explicando como funcionar, ele tem várias funcionalidades, assim como paginate, pesquisa dinâmica, quantidade de itens por pagina e etc.

A parte de paginação fica mais o menos assim:

inserir a descrição da imagem aqui

E vc não precisa digitar linhas e linhas pra paginar os seus dados no braço, ele resolve tudo pra vc.

Basicamente vc vai instalar ele no seu project; Dentro da sua classe vc vai importar ele: import { DataTableDirective } from 'angular-datatables';

Vai criar uma propriedade mais o menos assim:

public dtOptions: DataTables.Settings = {};

E configurar ela dentro do seu ngInit, mais o menos assim:

  this.dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 5,
    jQueryUI: true,
    language: <any>dtLanguage,
    autoWidth: false,
  };

No HTML vc chama esses parametros na table:

<table datatable [dtOptions]="dtOptions" class="row-border hover">

Esse é um padrão que eu uso. Mas no link acima contém toda a documentação dela. Acredito que isso resolva sua questão.

Segue também aqui um link mostrando mais a fundo como configurar: https://stackoverflow.com/questions/51363693/using-full-featured-datatables-plugin-with-angular-6

1
  • Bom dia! @Paulo Felipe Martins obrigado! É isso mesmo que preciso!
    – hard123
    Commented 7/03/2019 às 12:13
1

Vc pode criar um formData e passar ele inteiro pra api, tipo assim:

    getListaUsuariosPaginado(): Observable<Usuario[]> {
      const formData = new FormData();   
      formData.append('pagina', pagina);  
      formData.append('tamanho_pagina', tamanhoPagina);

      const url = `${environment.apiUrl}/`;
      return this.http.get<Usuario[]>(url, formData);
    }

Dentro do append o primeiro parâmetro é o nome que vc vai dar, e o segundo é o dado que vc quer enviar.

Depois disso só passar o formData inteiro no request e depois capturar os dados na api.

Somente capturar os dados na api do resquest

$pagina = $request['pagina'];
$tamanhoPagina = $request['tamanho_pagina'];
2
  • O problema dessa técnica é que não seguiria a rota, pode dar problema. ou então teria que mudar a rota!
    – novic
    Commented 5/03/2019 às 23:46
  • Obrigado @Paulo Felipe Martins pela sua solução, mas minha dúvida não é como enviar os dados e sim como saber quando é a página 2 ou página 3, pois preciso fazer uma paginação de 10 em 10 registros, porém estou vendo que minha dúvida não ficou tão clara assim então eu vou editar meu post e adicionar mais informações para ficar mais claro.
    – hard123
    Commented 6/03/2019 às 11:05

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 .