Question

我正在处理一些项目，但我找不到搜索管道的正确答案。这是我的代码：

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

@Pipe({
  name: 'SearchPipe'
})

export class SearchPipe {


 transform (value, [queryString]) {
    if (value==null) {
      return null;
    }
    if (value=="") {
      return null;
    }

    if(queryString !== undefined){
        return   value.filter(item=>item.model.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)         ;
    }else{
        return value;
    }
  }
}

当我在搜索中输入时，我得到包含字母A的所有搜索结果。我需要用字而不是字母搜索我的json。抱歉我的语言不好，希望你能理解。这是JSON。

[
  {

    "brand": "Suzuki",
    "condition": "polovno",
    "salesman": "Automotive",
    "model": "Vitara"
  }
]

如果有人可以修改代码，我会非常高兴。提前谢谢！

Answer 1

您不需要queryString参数周围的括号。您可以通过参数化管道传递它（例如 SearchPipe：queryString ）。

这是一个plunker示例。

Answer 2

我根据答案HERE创建了一个关于这个问题的傻瓜。

此外，我必须添加@Input的{{1}}，@ViewChild和ElementRef，然后创建<input>来观察它。

Angular2搜索过滤器：PLUNKR

Answer 3

不确定您拥有的过滤器逻辑，但如果它已经

，请尝试这样做

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

@Pipe({
  name: 'SearchPipe'
})

export class SearchPipe implements PipeTransform{


 transform (value, [queryString]) {
    if (value==null || value=="") {
      return null;
    }

    if(queryString !== undefined){
        return   value.filter(item=>item.model.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)         ;
    }else{
        return value;
    }
  }
}

搜索Angular2

3 个答案: