I find a bug in my code which allows yes, to do infinite scrolling but it does not update the data, so the same data is displayed over and over again, I don't know how to solve it, I am using the latest version of Angular, I would appreciate it If one of them has a tip or, failing that, the solution. My scroll code is the following (I highlight that I am using the "ngx infinite scroll" dependency)
Componente¨
@HostListener('window:scroll', [])
onWindowScroll(): void {
const yOffSet = window.pageYOffset;
if (
(yOffSet ||
this.document.documentElement.scrollTop ||
this.document.body.scrollTop) > this.showScrollHeight
) {
this.showButtonGoUp = true;
} else if (
this.showButtonGoUp &&
(yOffSet ||
this.document.documentElement.scrollTop ||
this.document.body.scrollTop) < this.hideScrollHeight
) {
this.showButtonGoUp = false;
}
}
onScrollDown():void{
if (this.info.next) {
console.log(this.pageNum)
this.pageNum++;
console.log(this.pageNum) //Prueba 1 scroll inifnito
this.getDataFromService();
}
}
onScrollTop(): void {
this.document.body.scrollTop = 0; //Para navegador Safari
this.document.documentElement.scrollTop = 0; //Para el resto de navegadores
}
Everything is correctly imported, I don't show you the whole component to save space. This is the HTML:
<div class="row" infinite-scroll (scrolled)="onScrollDown()">
<div class="col-xs-12 col-sm-6 col-md-3" *ngFor="let character of characters">
<app-character [character]="character"></app-character>
</div>
<div
class="col-xs-12 col-sm-12 col-md-12 mt-5 container-notFound"
*ngIf="characters.length <= 0"
>
<p>No hay resultados de búsqueda...</p>
</div>
</div>
<button [ngClass]="'no-hidden'"
*ngIf="showButtonGoUp"
clas="btn btn-dark"
(click)="onScrollTop">
Ir al principio
</button>