我喜欢用于特定于应用程序的过滤器的另一种方法是在组件上使用自定义只读属性，这允许您比使用自定义管道(IMHO)更清晰地封装过滤逻辑。

例如，如果我想绑定到albumList并过滤searchText:

searchText: "";
albumList: Album[] = [];

get filteredAlbumList() {
    if (this.config.searchText && this.config.searchText.length > 1) {
      var lsearchText = this.config.searchText.toLowerCase();
      return this.albumList.filter((a) =>
        a.Title.toLowerCase().includes(lsearchText) ||
        a.Artist.ArtistName.toLowerCase().includes(lsearchText)
      );
    }
    return this.albumList;
}

要在HTML中绑定，你可以绑定到只读属性:

<a class="list-group-item"
       *ngFor="let album of filteredAlbumList">
</a>

我发现对于特定于应用程序的专用过滤器，这比管道工作得更好，因为它保持了与组件过滤器相关的逻辑。

管道对于全局可重用过滤器工作得更好。

我喜欢用于特定于应用程序的过滤器的另一种方法是在组件上使用自定义只读属性，这允许您比使用自定义管道(IMHO)更清晰地封装过滤逻辑。

例如，如果我想绑定到albumList并过滤searchText:

searchText: "";
albumList: Album[] = [];

get filteredAlbumList() {
    if (this.config.searchText && this.config.searchText.length > 1) {
      var lsearchText = this.config.searchText.toLowerCase();
      return this.albumList.filter((a) =>
        a.Title.toLowerCase().includes(lsearchText) ||
        a.Artist.ArtistName.toLowerCase().includes(lsearchText)
      );
    }
    return this.albumList;
}

要在HTML中绑定，你可以绑定到只读属性:

<a class="list-group-item"
       *ngFor="let album of filteredAlbumList">
</a>

我发现对于特定于应用程序的专用过滤器，这比管道工作得更好，因为它保持了与组件过滤器相关的逻辑。

管道对于全局可重用过滤器工作得更好。

我不确定它是什么时候进来的，但他们已经做了切片管，可以做到这一点。它也有很好的记录。

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

<p *ngFor="let feature of content?.keyFeatures | slice:1:5">
   {{ feature.description }}
</p>

对于这个需求，我实现并发布了一个通用组件。看到

https://www.npmjs.com/package/w-ng5

在使用此组件之前，使用npm安装此包:

npm install w-ng5 --save

之后，在app.module中导入模块

...
import { PipesModule } from 'w-ng5';

下一步，在app.module中添加declare部分:

imports: [
  PipesModule,
  ...
]

样本用

过滤简单字符串

<input type="text"  [(ngModel)]="filtroString">
<ul>
  <li *ngFor="let s of getStrings() | filter:filtroString">
    {{s}}
  </li>
</ul>

在级别2中过滤复杂字符串字段“Value”

<input type="text"  [(ngModel)]="search">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

过滤复杂字符串-中间字段- 1级中的“值”

<input type="text"  [(ngModel)]="search3">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

过滤复杂数组的简单字段“Nome”级别为0

<input type="text"  [(ngModel)]="search2">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

在树字段中过滤-在第2级中字段'Valor'或在第1级中字段'Valor'或在第0级中字段'Nome'

<input type="text"  [(ngModel)]="search5">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

过滤不存在的字段- 'Valor'在不存在的级别3

<input type="text"  [(ngModel)]="search4">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

该组件具有无限属性级别…

我根据这里和其他地方的答案创建了一个活塞。

此外，我必须添加一个<input>的@Input， @ViewChild和ElementRef，并创建和订阅()到它的一个可观察对象。

Angular2搜索过滤器:PLUNKR(更新:plunker不再工作)

简化方式(由于性能问题，仅用于小型数组。在大型数组中，你必须通过代码手动创建过滤器):

见:https://angular.io/guide/pipes appendix-no-filterpipe-or-orderbypipe

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] {  
      if (!items) return [];
      if (!value || value.length == 0) return items;
      return items.filter(it => 
      it[field].toLowerCase().indexOf(value.toLowerCase()) !=-1);
    }
}

用法:

<li *ngFor="let it of its | filter : 'name' : 'value or variable'">{{it}}</li>

如果使用变量作为第二个参数，不要使用引号。