Angular 4分页总页在过滤数据时未更新

Question

这是我的分页服务代码，在我的角度组件中，我将其与一些过滤器配合使用，在初始加载时加载数据，就我而言，我有2000条记录，因此显示了100页。我每页显示20页。 但是，当我对数据应用一些过滤器时，每页显示2、3、4、5条记录，而我的页数仍显示100页。 我的预期行为是，如果我的过滤器将获得100条匹配的记录，则分页应显示第5页，而我希望每页20条记录，因此过滤所有记录应在前5页中。页数应该更新！。

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 20) {
        // calculate total pages
        const totalPages = Math.ceil(totalItems / pageSize);
      //  console.log(totalPages)
        // ensure current page isn't out of range
        if (currentPage < 1) {
            currentPage = 1;
        } else if (currentPage > totalPages) {
            currentPage = totalPages;
        }

        let startPage: number, endPage: number;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        const startIndex = (currentPage - 1) * pageSize;
        const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        const pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

这是我正在使用的过滤器代码；

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

@Pipe({
    name: 'drlSearch'
})
export class DrlSearchPipe implements PipeTransform {
    transform(DRLNumberList: any, Drl_Name: string, Start_Number: string, End_Number: string, QTY: string, In_Triggered: string, Ported: string) {
        if (DRLNumberList && DRLNumberList.length) {

            return DRLNumberList.filter(item => {
                if (Drl_Name && item.DRLName.toLowerCase().indexOf(Drl_Name.toLowerCase()) === -1) {
                    return false;
                }
                if (Start_Number && item.StartNumber.toLowerCase().indexOf(Start_Number.toLowerCase()) === -1) {
                    return false;
                }
                if (End_Number && item.EndNumber.toLowerCase().indexOf(End_Number.toLowerCase()) === -1) {
                    return false;
                }
                if (QTY && item.Qty.toLowerCase().indexOf(QTY.toLowerCase()) === -1) {
                    return false;
                }
                if (In_Triggered && item.INTriggered.toLowerCase().indexOf(In_Triggered.toLowerCase()) === -1) {
                    return false;
                }
                if (Ported && item.Ported.toLowerCase().indexOf(Ported.toLowerCase()) === -1) {
                    return false;
                }

                return true;
           })

        } else {

            return DRLNumberList;
        }
    }
}

这是我的component.html代码：

      <div class="grey-label ds-input ng-untouched ng-pristine ng-valid">
         <input [(ngModel)]="Drl_Name" placeholder="By Name" >
        </div>

        <!-- items being paged -->

           <!-- pager -->
        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
                            <li [ngClass]="{disabled:pager.currentPage === 1}">
                                <a (click)="setPage(1)">First</a>
                            </li>
                            <li [ngClass]="{disabled:pager.currentPage === 1}">
                                <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                            </li>
                            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                                <a (click)="setPage(page)">{{page}}</a>
                            </li>
                            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                                <a (click)="setPage(pager.currentPage + 1)">Next</a>
                            </li>
                            {{pager.totalPages}} 
                            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                                <a (click)="setPage(pager.totalPages)">Last</a>
                            </li>
                        </ul>

 <table >
                    <thead>
                        <tr>
                            <th> Name</th>
                            <th> Start</th>
                            <th> End</th>
                            <th>Y/N</th>
                            <th>T</th>
                            <th>Y/N</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let drl_no of pagedItems | drlSearch: Drl_Name" >

                            <td class="ff">{{drl_no.DRLName}} || {{pagedItems.length}}</td>
                            <td class="ff">{{drl_no.StartNumber}}</td>
                            <td class="ff">{{drl_no.EndNumber}}</td>
                            <td class="ff">{{drl_no.Qty}}</td>
                            <td class="ff">{{drl_no.INTriggered}}</td>
                            <td class="ff">{{drl_no.Ported}}</td>
                        </tr>
                    </tbody>
                </table>