如何将过滤器应用于*ngFor？

Question

显然,Angular 2将使用管道而不是Angular1中的过滤器以及ng-for来过滤结果,尽管实现似乎仍然模糊,没有明确的文档.

也就是说,我想要实现的目标可以从以下角度来看待

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

如何使用管道实现？

Answer 1

基本上,你编写一个管道然后可以在*ngFor指令中使用.

在您的组件中:

filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];

在模板中,您可以将字符串,数字或对象传递给管道以用于过滤:

<li *ngFor="let item of items | myfilter:filterargs">

在你的管道中:

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

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

记得注册你的管道app.module.ts; 你不再需要在你的管道中注册管道了@Component

import { MyFilterPipe } from './shared/pipes/my-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        MyFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

这是一个Plunker,它演示了使用自定义过滤器管道和内置切片管道来限制结果.

请注意(正如几位评论员指出的那样)Angular中没有内置过滤管道的原因.

Answer 2

很多人都有很好的方法,但这里的目标是通用并定义一个数组管道,它在与*ngFor的关系中可以非常重复使用.

callback.pipe.ts(不要忘记将它添加到模块的声明数组中)

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

@Pipe({
    name: 'callback',
    pure: false
})
export class CallbackPipe implements PipeTransform {
    transform(items: any[], callback: (item: any) => boolean): any {
        if (!items || !callback) {
            return items;
        }
        return items.filter(item => callback(item));
    }
}

然后在你的组件中,你需要实现一个具有以下signuature的方法(item:any)=> boolean,在我的例子中,我称之为filterUser,它过滤用户的年龄大于18岁.

你的组件

@Component({
  ....
})
export class UsersComponent {
  filterUser(user: IUser) {
    return !user.age >= 18
  }
}

最后但并非最不重要的是,您的HTML代码将如下所示:

你的HTML

<li *ngFor="let user of users | callback: filterUser">{{user.name}}</li>

正如您所看到的,此管道在所有数组中都非常通用,例如需要通过回调过滤的项目.在我的案例中,我发现它对*ngFor类似场景非常有用.

希望这可以帮助!!!

codematrix

Answer 3

简化方式(由于性能问题仅在小型阵列上使用.在大型阵列中,您必须通过代码手动生成过滤器):

请参阅:https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

@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>

如果使用变量作为第二个参数,请不要使用引号.

Answer 4

这是我在不使用管道的情况下实现的.

component.html

<div *ngFor="let item of filter(itemsList)">

component.ts

@Component({
....
})
export class YourComponent {
  filter(itemList: yourItemType[]): yourItemType[] {
    let result: yourItemType[] = [];
    //your filter logic here
    ...
    ...
    return result;
  }
}

Answer 5

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

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>

Answer 6

您还可以使用以下内容:

<template ngFor let-item [ngForOf]="itemsList">
    <div *ng-if="conditon(item)"></div>
</template>

如果您的商品符合条件,则仅显示div

有关详细信息,请参阅角度文档.如果还需要索引,请使用以下命令:

<template ngFor let-item [ngForOf]="itemsList" let-i="index">
    <div *ng-if="conditon(item, i)"></div>
</template>

Answer 7

我用的是动态过滤管

来源数据：

items = [{foo: 'hello world'}, {foo: 'lorem ipsum'}, {foo: 'foo bar'}];

在模板中，您可以在任何对象属性中动态设置过滤器：

<li *ngFor="let item of items | filter:{foo:'bar'}">

管道：

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

  @Pipe({
    name: 'filter',
  })
  export class FilterPipe implements PipeTransform {
    transform(items: any[], filter: Record<string, any>): any {
      if (!items || !filter) {
        return items;
      }

      const key = Object.keys(filter)[0];
      const value = filter[key];

      return items.filter((e) => e[key].indexOf(value) !== -1);
    }
  }

app.module.ts不要忘记在声明中注册管道

Answer 8

Angular2中的管道与命令行上的管道类似.每个先前值的输出都被送入管道之后的过滤器,这样就可以很容易地链接过滤器,如下所示:

<template *ngFor="#item of itemsList">
    <div *ngIf="conditon(item)">{item | filter1 | filter2}</div>
</template>

Answer 9

一个与 Angular 6 一起用于过滤 ngFor 的简单解决方案，如下所示：

<span *ngFor="item of itemsList"  >
  <div *ngIf="yourCondition(item)">
    
    your code
    
  </div>
</span>

跨度很有用，因为它本质上不代表任何东西。

Answer 10

我知道这是一个老问题，但是，我认为提供另一种解决方案可能会有所帮助。

相当于这个的 AngularJS

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

在 Angular 2+ 中，您不能在同一个元素上使用 *ngFor 和 *ngIf，因此它将如下所示：

<div *ngFor="let item of itemsList">
     <div *ngIf="conditon(item)">
     </div>
</div>

如果您不能用作内部容器，请改用 ng-container。当你想在你的应用程序中有条件地附加一组元素（即使用 *ngIf="foo"）但不想用另一个元素包装它们时，ng-container 很有用。

Answer 11

管道将是最好的方法。但下面的一个也可以。

<div *ng-for="#item of itemsList">
  <ng-container *ng-if="conditon(item)">
    // my code
  </ng-container>
</div>

Answer 12

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

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

要使用此组件，请先使用 npm 安装此包：

npm install w-ng5 --save

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

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

在下一步中，在 app.module 的声明部分添加：

imports: [
  PipesModule,
  ...
]

样品使用

过滤简单字符串

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

过滤复杂字符串 - 级别 2 中的字段“值”

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

过滤不存在​​的字段 - 不存在级别 3 中的“Valor”

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

该组件适用于无限属性级别...