首页 > 解决方案 > 无限滚动失败,Angular

问题描述

我在我的代码中发现了一个错误,它允许进行无限滚动,但它不会更新数据,因此一遍又一遍地显示相同的数据,我不知道如何解决它,我使用的是最新版本Angular 的,如果其中一个有提示,或者如果没有提示,我将不胜感激。我的滚动代码如下(我强调我正在使用“ngx 无限滚动”依赖项)

组件¨

@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
  }

一切都正确导入,我不向您展示整个组件以节​​省空间。这是 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>

标签: javascriptangulartypescriptinfinite-scrollngxs

解决方案


推荐阅读