如何在angular2中添加过滤器?

时间:2016-02-11 09:13:39

标签: angularjs angular angular2-routing

你能否告诉我如何在angular2中添加过滤器。实际上每当用户在输入字段中输入任何内容时,它应该像在自动完成中一样过滤列表。我们可以在角度2中进行操作吗?

这是我的代码 http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

<div>
  <input type='text' #inputD>
     <ul>
      <li *ngFor="#elt of elements | async">{{elt.name}}</li>
    </ul>
</div>

这里更新是我的过滤器

http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

import {Injectable, Pipe} from 'angular2/core';

@Pipe({
  name: 'filter'
})
@Injectable()
export class Listfilter {
  transform(items: any[], args: any[]): any {
    return items.filter(item => item.column === args[0]);
  }
}

如何将键上和键下事件添加到角度2中的过滤器列表

1 个答案:

答案 0 :(得分:2)

您需要将管道添加到要使用它的注释

@Component({

    templateUrl: 'home/home.html',
    providers: [SharedService],
    pipes: [Listfilter]
})    

并像

一样使用它
<li *ngFor="#elt of elements | async | filter:arg1:arg2">{{elt.name}}</li>

虽然没有尝试过。

管道也不应该抛出null

export class Listfilter {
  transform(items: any[], args: any[]): any {
    if(!items) {
      return null;
    }
    return items.filter(item => item.name === args[0]);
  }
}