ngx-pagination 不适用于过滤表答案

【问题标题】：ngx-pagination doesn't works fine with Filtering tablengx-pagination 不适用于过滤表
【发布时间】：2020-09-08 12:25:14
【问题描述】：

我得到了一个简单的表格，我在其中通过local_part 实现了过滤选项，一切正常，直到我在最后一页的例子中没有尝试搜索表格。如果我在第一页上，我可以找到所有内容，但是当我例如在第 20 页上搜索时，我得到了空白行（并且分页显示我只有一页（所以这是正确的）当我点击我的分页时 [1 ] 然后我看到过滤后的数据）

过滤我使用ngx-filter-pipe，分页使用ngx-pagination

我对表格搜索的输入

<input class="form-control form-control-alternative" placeholder="Szukaj aliasu" type="text [(ngModel)]="queryString.local_part">

我的表格行

<tr *ngFor="let aliases of alias | filterBy: queryString | paginate: { itemsPerPage: 10, currentPage: p }; let i = index">

我的分页控件

<pagination-controls 
  (pageChange)="p = $event" 
  directionLinks="true" 
  autoHide="false"
  responsive="true" 
  previousLabel="Prev" 
  nextLabel="Next">
</pagination-controls>

应该怎么样？无论我在哪个页面上，我都想过滤我的表格。

【问题讨论】：

标签： angular ngx-pagination

【解决方案1】：

这可能不是最终解决方案，但在我的项目中，我创建了一个自定义对象作为“配置”，用于将分页属性声明为一种解决方法：

this.config = {
  itemsPerPage: 6,
  currentPage: 1,
};

现在在 HTML 中更改如下：

*ngFor="let service of services | filter:searchText | paginate: config"

在搜索栏的输入只添加点击事件如下：

(click)="config.currentPage = 1"

它看起来像这样：

<input matInput (click)="config.currentPage = 1" placeholder="Ex. City Data" #input [(ngModel)]="searchText">

这解决了我的问题。

【讨论】：