无限滚动模块在角度

Question

我正在开发一个角度为6的Web应用程序，并且发生了一些非常有趣的事情。我正在使用infitescroll模块，该模块用于在到达Feed结尾时执行功能以获得更多内容。我之前使用的按钮用于同一目的，现在正尝试升级到infinitescroll。事实是，如果按钮位于html页面，按预期运行。如果按钮不存在，它会在一次滚动后停止加载Feed。我不知道为什么会发生这种情况，并且对于如何使这项工作感到非常感激。

html - ＆gt;

<div class ="feed" *ngIf= "lastpage > 1"infiniteScroll [infiniteScrollDistance] ="0.02" [infiniteScrollThrottle]="100" (scrolled)="fetchdata(cursu,curcat)"> 
<div *ngIf="!isloading" style = "padding-right: 300px; padding-left: 300px; padding-top: 100px;">
    <ng-container *ngIf="cards">
    <div *ngFor ="let card of cards; let i=index">

    <app-card [card]="card" ></app-card>
    </div>
    <button (click)="fetchdata(cursu,curcat)"></button>
</ng-container>
</div>
<div class ="loader" *ngIf = "isloading"></div>
</div>
<div *ngIf = "lastpage == 1">
    <div *ngIf="!isloading" style = "padding-right: 300px; padding-left: 300px; padding-top: 100px;">
        <ng-container *ngIf="cards">
        <div *ngFor ="let card of cards; let i=index">
            <app-card [card]="card" ></app-card>
        </div>

    </ng-container>
    </div>
</div>

JS - ＆GT;

@Input() cat :string; 
  @Input() sucat:string;



  //These 4 to represent current feed cat and supercat
  private curcat : string;
  private cursu : string;
  private page : number;
  private catchange : boolean; //specially to determine whether feed has been changed

  //to  determine if page loading 
  private isloading : boolean = false;
  private islastpage : boolean = false;


  //These to  deal with the the JSON of the response Data
  private cards : Card[] = [];
  private itemcount : number;
  private lastpage : number  = 10;
  constructor(private contentservice: ContentService) { }

  ngOnChanges(changes : SimpleChange){
    this.currentfeedparam(this.cat,this.sucat);
    this.fetchdata(this.cursu,this.curcat);
    this.catchange = true;
  }

  ngOnInit(){
  }

  currentfeedparam(c:string,s:string){
    //this function is called whenever the feed category changes
    //therefore its in ngOnchanges since in other cases the feed retains its control(No changes outside of its control take place)
    //this fucntion to set feed status
    this.curcat = c;
    this.cursu = s;
    this.page = 1;  
  }

  fetchdata(su :string,cat : string){
  this.isloading = true;  
  if(this.lastpage >=  this.page){
    this.contentservice.getcontentdata(cat,su,this.page)
    .subscribe((response) => {
      const data = new JsonData(response);
      this.lastpage = data.lastPage;
      console.log(this.page+' '+this.lastpage);
      this.page++;// so default case means page 
      if(this.catchange){
        this.cards = data.items;
        this.catchange = false; 
        console.log('Here you changed cat or sup');
        console.log(this.cards);
      }
      else{
        console.log('Here you clicked next')
        const temp : Card[] = data.items
        this.cards =this.cards.concat(temp);
        console.log(this.cards);

      }    

    });
   this.isloading = false;    
  }
  else{
    this.islastpage = true;

  }
}
notify(){
  console.log('It works');
}

}