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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

显然,Angular 2将使用管道代替过滤器,与Angular1结合使用ng-for来过滤结果,实现仍然似乎是模糊的,没有明确的文档。

也就是说,我试图达到的目标可以从以下的观点来看

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

如何使用管道实现?

提问于
用户回答回答于

基本上,你写一个管道,然后你可以在*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 { }
用户回答回答于

简化的方式(由于性能问题,只能用于小型数组)在大型数组中,你必须通过代码手动进行过滤:

请参阅: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>

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

扫码关注云+社区