搜索 Angular2 的管道答案

【问题标题】：Search pipe for Angular2搜索 Angular2 的管道
【发布时间】：2016-06-26 16:38:50
【问题描述】：

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

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 时，我会得到所有包含字母 A 的搜索结果。我需要用单词而不是字母来搜索我的 json。对不起，我的语言不好，我希望你能理解。这是 JSON。

[
  {

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

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

【问题讨论】：

标签： json search angular pipe

【解决方案1】：

queryString 参数不需要括号。您可以通过参数化管道（例如 SearchPipe:queryString）将其传递。

这是一个plunker 示例。

【讨论】：

【解决方案2】：

我根据HERE 的答案创建了一个 plunker。

此外，我必须添加<input> 的@Input、@ViewChild 和ElementRef，并将subscribe() 添加到它的可观察对象中。

Angular2 搜索过滤器：PLUNKR

【讨论】：

【解决方案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;
    }
  }
}

【讨论】：