Разбивка на страницы и поиск с использованием ngx-infinite-scroll - PullRequest
Новая
       17

Разбивка на страницы и поиск с использованием ngx-infinite-scroll

0 голосов
/ 02 июля 2019

Я выполняю http get call по двум сценариям:

  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 записей на странице, но для получения вызова необходимо 50 записей.

Я использую угловой ngx-infinite-scroll плагин.

...