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]">«</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]">»</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…
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP