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部分

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您应该在分页之前先进行过滤

如何在ng中使用带分页的搜索管道使用angular 4

1 个答案: