过滤数据后，ngx-pagination 未更新

问题描述

我在我的 JSON 数据上使用自定义过滤器和 ngx-pagination。这里的问题是当我过滤数据时，我的分页控件没有得到更新，即使数据不可用，仍然显示旧页面大小并允许分页。请提出建议。

现在，它有 21 个结果，没有应用任何过滤器

现在，我已经应用了过滤器 n 现在它只显示 1 条记录，但分页仍然显示 5 页（考虑到每页大小 5 个）。

table-filter.pipe.ts

import { Pipe,PipeTransform } from "@angular/core";

@Pipe({
  name: "tableFilter"
})
export class TableFilterPipe implements PipeTransform {
  transform(list: any[],filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(filters[key]);
        } else if (key == "edob") {
          return new Date(filters[key]) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

app.component.html

<table class="table table-sm table-responsive">
      <thead>
        <tr>
          <th></th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>dob (mm/dd/yyyy)</th>
          <th>Impact</th>
          <th>score</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | tableFilter: form.value | paginate: { id: 'listing_pagination',itemsPerPage: 5,currentPage: page,totalItems: totalRecords }">
          <td><input *ngIf="!isEdit" [(ngModel)]="user.checked" type="checkBox" (change)="checkBoxClicked()"></td>
          <td>{{user.first_name}}</td>
          <td>{{user.last_name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.gender}}</td>
          <td>{{user.dob}}</td>
          <td>{{user.impact}}</td>
          <td>
            <div [ngClass]="getClass(user)">{{user.score}}</div>
          </td>
          <td>
            <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)">Edit</button>
            <button class="btn btn-primary btn-sm btn-sm ml-2" (click)="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <pagination-controls id="listing_pagination" directionLinks="true" (pageChange)="page = $event"></pagination-controls>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）