TransWikia.com

no me funciona la paginacion con angular

Stack Overflow en español Asked by Rafael Hernández on August 8, 2020

el backend está hecho en nodejs y lo he probado con postman funciona pero en el front end no me va la paginación al hacer click por primera vez en la paginacion se recarga la pagina.

ngOnInit(): void {
    this.route.params.subscribe(params =>{
      console.log(params);
      var page = +params['page'];
      console.log(page);
      if(!page || page == null  || page == undefined)
      {
        page = 1;
        this.prev_page = 1;
        console.log(this.prev_page);
        this.next_page = 2;
      }
      console.log(page);
      this.getBooks(page);
    });


    this.loadUser();
  }

  loadUser()
  {

    this.identity = this.userservice.getIdentity();
  //  console.log(this.identity);
    this.token = this.userservice.getToken();
  }

  getBooks(page)
  {
      //  console.log('error');
    this.bookservice.getBooks(page).subscribe(
      response =>
      {

        if(response.books)
        {
          this.books = response.books;
          console.log(this.books);

          // navegacion de paginación
          this.totalPages = response.totalPages;
          console.log(this.totalPages);

          var number_pages = [];
          for(var i = 1; i <= this.totalPages; i++)
          {
            number_pages.push(i);
          }
          this.number_pages = number_pages;

          if(page >=2)
          {
            this.prev_page = page-1;
          }
          else
          {
            this.prev_page = 1;
          }
          if(page < this.totalPages)
          {
            this.next_page = page+1;
          }
          else
          {
            this.next_page = this.totalPages;
          }

        }
        else
        {
         this.router.navigate(['inicio']);
         console.log('error');
        }
      },
      error =>
      {
        console.log(error);
      }
    );
  }

En el metodo ngOnInit() algo está mal pero la consola no me muestra error.

list-books.html

<div class="col-lag-12">


  <ul class="list-group">
    <li class="list-group-item" *ngFor="let book of books">
    <h4>
      <a [routerLink]="['/inicio']">
        {{book.title}}
      </a>
    </h4>
    <p>{{book.description}}</p>
    <p>{{book.author}}</p>
    <p>{{book.stock}}</p>
    <p>{{book.price}}</p>
   </li>
  </ul>
</div>

<ul class="pagination">
   <li class="page-item">
     <a class="page-link" [routerLink]="['/books', prev_page]">&laquo;</a>
   </li>
   <li class="page-item" *ngFor="let num of number_pages">
      <a class="page-link" [routerLink]="['/books', num]" href="">{{ num }}</a>
   </li>

   <li class="page-item">
     <a class="page-link" [routerLink]="['/books', next_page]">&raquo;</a>
   </li>
 </ul>

Creo que ya sé por que me falla la paginacion en el archivo de rutas del proyecto me carga la pagina que muestra los libros en{ path: '**', component: ListBooksComponent },

no por la ruta del componente { path: 'list-books/:page', component: ListBooksComponent },

pero no sé por que no me carga la ruta…

One Answer

Tus metodos que calculan el this.prev_page y this.next_page tienen que estar dentro de ngOnChanges(){} para que actualice la data.

Tambien podrias hacer esta validación.

this.activatedRoute.paramMap.subscribe(params=>{
  let page:number = +params.get('page');
  if (!page) {       
    page = 1;
  }
  this.getBooks(page); 
})

Answered by Eloy Nuñez on August 8, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP