在angular4中搜索2个字母后的管道

时间:2017-08-30 11:19:45

标签: angular angular2-services angular-pipe

我有seacrh管道工作正常,问题是我输入完整的单词之后的搜索,我想在输入两个字母之后seacrh 这是代码

<input type="text" class="form-control"   [value]="searchRole"/>
<li *ngFor="let user of roleUserData | SearchRolePipe: 'name':searchRole ;let  i= index" >{{user.name}}</li>

export class SearchRolePipe implements PipeTransform {


  transform(items: any[], field: string, value: string): any[] {

    if (value === '') {
      return items
    }
     if (!items) {

       return [];
     } else {

      return items.filter(it => it[field] == value);
}
}

它正在工作,我的要求是它应该搜索2个用户输入字母

示例,如果数组是

[
{'name': 'abc'}, 
{'name': 'abcde'},
{'name': 'bce'}

] 这里 searchRole 是空的公共变量 如果我要搜索abc然后只返回结果[{name: abc}]

但我想如果我输入'ab'那么它应该返回

[
 {'name': 'abc'}, 
    {'name': 'abcde'}]

请任何人让我知道如何解决它或任何其他好方法

3 个答案:

答案 0 :(得分:0)

试试这个

transform(items: any[], field: string, value: string): any[] {

    if (value === '') {
      return items
    }
     if (!items) {

       return [];
     } else if( value.length >= 2 ) { //new code here
      return items.filter(it => it[field] == value);
     }else{
      return items; // returning all the items. Filtering starts at 2 letters
     }

答案 1 :(得分:0)

我认为这就是你想要的:

transform(items: any[], field: string, value: string): any[] {

    if (!items) {
        return [];
    }

    if (!value || value.length === 0) {
      return items;
    } 

    return items.filter(it => it[field].indexOf(value) >= 0);
}

答案 2 :(得分:0)

这会做你想要的

// imports in top level  
    import { of, pipe } from 'rxjs';
    import { map, filter } from 'rxjs/operators';
// imports in top level 

const namesArray = of('omar', 'ali', 'tota', 'lelo', 'pedo')
.pipe(filter((n: any) => n.indexOf('o') >= 0)); // get names containing letter "o"
namesArray.subscribe(x => console.log('filter,map ', x));