使用ngx-infinite-scroll进行分页和搜索

Question

我在两种情况下拨打http get电话：

1. 在加载组件时，我想仅用页码加载所有记录
2. 搜索完任何关键字后，我想根据页码和搜索键拨打电话。

component.ts

 ngOnInit() {
      this.getAllUser(1,"");
  }
  getAllUser(page,key) {

    this.apiserv.getAllUsers(this.page,this.key).subscribe(
      (res) => {this.users =res,    
      console.log('searched data',res)},
      error => this.error =error
    );    
  }


  onScroll() {  
    this.page = this.page + 1;  
    this.getAllUser(this.page,this.key);  
    console.log("Scrolled...."); 

  }  

  onSearch(searchKey:string){
    if(searchKey == ""){
      this.alertserv.openSnackBar('Please Enter something to search',700);
      this.getAllUser(1,"");
    }
    else{
    this.key = searchKey;

    console.log("key is",searchKey);
    this.getAllUser(this.page,this.key);

  }
}

这是我的HTML代码：

<div class="list-wrp">
        <div class="row" 
        infiniteScroll 
        [infiniteScrollDistance]="2" 
        [infiniteScrollThrottle]="50"
        (scrolled)="onScroll()" 
        [infiniteScrollDisabled]="isFullListDisplayed"
        [scrollWindow]="false" 
          style="max-height: 400px; overflow-y: scroll;">

          <div *ngFor="let user of users; let idx = index" class="item-tile" fxLayout="row"
            fxLayoutAlign="space-between center">
            <div class="item-action-block" fxLayout="row" fxLayoutGap="20px" (click)="selectItem(user,idx)"
              [ngClass]="{'selectedItem':selected[idx]}">
              <div class="item-select-action">
                <div class="item-slt-stl">
                  <i class="material-icons chk-icon">check </i>
                </div>
              </div>

              <div class="item-info" fxLayout="column">
                <p class="item-title"> {{user.loginId}}</p>
            <p class="item-sub-title"> {{user.email}}</p>
          </div>

    </div>

使用上面的代码，我一次就能显示50条API发送的所有记录，并且只能滚动两页。

我只希望每页显示10条记录，但是get呼叫应该记录50条记录。

我正在使用成角度的ngx-infinite-scroll插件。