如何使用 Angular 4 在 ngFor 中使用带有分页的搜索管道

Question

我有下面的搜索管道代码

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

@Pipe({
  name: 'pkhospitalparam'
})
export class PkhospitalparamPipe implements PipeTransform {

  transform(value: any[], searchString: string ) {

    if (!searchString) {
      console.log('no search');
      return value;
    }

    return value.filter(it => {
        const hospitalName = it.name.toLowerCase().includes(searchString.toLowerCase());

        return (hospitalName);
    });
 }

}

HTML：

 <input type="text" class="form-control" [(ngModel)]="searchHospitalParam"  />

             <div *ngFor="let result of resultArray | paginate: { itemsPerPage: 5, currentPage: p } | pkhospitalparam:searchHospitalParam"></div>

我已经在 ngFor 中传递了管道参数，它工作正常。问题是因为我已经实现了分页（大约 50 页），所以搜索不会发生 50 页。仅在我所在的页面上搜索过滤器。无论如何都要对所有页面进行全局搜索吗？

Answer 1

这已经很老了，但可能对其他人有帮助，

通过使用 w-ng5 组件为我工作

1) 通过 npm 安装

npm install w-ng5 --save

2) 在 app.module.ts 中安装导入模块后

import { PipesModule } from 'w-ng5';

3) 在 app.module.ts 的导入部分添加

imports: [
    PipesModule,
 ]

4) 现在您可以使用过滤器进行过滤了

<input type="text" class="form-control" [(ngModel)]="searchHospitalParam"/>
   <div *ngFor="let result of resultArray | filter:searchHospitalParam" | paginate: { itemsPerPage: 5, currentPage: p } | ></div>

*NB 你应该在分页之前先过滤