与服务器分页一起使用的 Angular 4 过滤器管道答案

【问题标题】：angular 4 filter pipe used with server pagination与服务器分页一起使用的 Angular 4 过滤器管道
【发布时间】：2019-01-04 00:12:59
【问题描述】：

我正在使用带有分页的过滤器。它工作正常，但问题是当我搜索名称时，它会过滤结果，但分页保持不变，就像搜索结果返回 3 个过滤器记录时分页仍然显示页面并且用户可以导航这些页面一样。我想用搜索过滤器更改我的分页号。这是我的示例代码

    <input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">

<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>

      <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name':  _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
                                    <td>{{i+1}}</td>
                                    <td>{{row.Name}}</td>
                                    <td>{{row.TypeName}}</td>
                                    <td>{{row.Country}}</td>
                                    <td>{{row.Status}}</td>
                                    <td>{{row.ItemsQty}}</td>
                                    <td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
                                </tr>
                                <tr *ngIf="tableData2.dataRows.length == 0">
                                    <td colspan="7" class="text-center text-danger">No Record Found!</td>
                                </tr>
                            </tbody>
                        </table>

这是我正在使用的管道

@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
    transform(items: any[],field: string, searchText: string): any[] {
      if(!items) return [];
      if(!searchText) return items;
      searchText = searchText.toLowerCase();
       return items.filter( it => {
           debugger;
        return it[field].toLowerCase().includes(searchText);
      });
     }
  }

附上图片

【问题讨论】：

您正在使用多个管道，我认为“分页”管道对您的问题更有趣
是的，我必须使用多个管道来实现我的目标。
你真的应该避免使用pipe for filtering，而只是使用数组方法或RxJS过滤组件。

标签： angular pagination angular-pipe

【解决方案1】：

尝试在<pagination-controls> 元素上设置autoHide 选项，如果所有结果都适合第 1 页，则强制它消失。

链接到相关部分的文档：https://www.npmjs.com/package/ngx-pagination#api

已编辑以删除我删除 totalItems 选项的建议。错过了您说“服务器分页”的标题部分。掌心。

【讨论】：