代码之家 › 专栏 › 技术社区 › Nancy

如何在ngforusingangular4中使用分页的搜索管道

pipe pagination search angular

Nancy · 技术社区 · 8 年前

我有下面的搜索管道代码

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中的pipe参数,它工作得很好。问题是因为我已经实现了分页(大约50页),所以总共50页的搜索不会发生。只在我所在的页面上搜索筛选。是否仍要对所有页面进行全局搜索?

1 回复 | 直到 8 年前

Adeojo Emmanuel IMM 7 年前

这很古老,但可能对其他人有帮助,

利用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>

*注意:在分页之前,应该先过滤

推荐文章

Elaine Byene · 搜索仅在Angular 17中的当前页面上工作

1 年前

Tilly · 分页在转到第1页时会导致错误,但没有问题

2 年前

Dante · 在使用id和timestamp的游标分页中,我们是否需要id和timestamp来获得下一个页面?

2 年前