使用管道的angular2不区分大小写的过滤器？

Question

我想知道如何在 angular2 中使用管道进行不区分大小写的比较。

以下是我目前使用的方法。

其组件搜索正确但区分大小写。

如何让它不区分大小写？

1.components.json

"components": [
  {
      "name":"HeadingComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/ABC_bank.png",
      "cmpLocation":"",
      "isDynamic":"true"          
  },
  {
      "name":"BodyComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/demoairline.png",
      "cmpLocation":"",
      "isDynamic":"true" 
  },
  {
      "name":"FooterComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/SCE_5.PNG",
      "cmpLocation":"",
      "isDynamic":"true" 
  }

阅读此 JSON 数据后，我正在使用以下代码使用管道执行搜索操作。

2.components.html

<input class="form-control input-sm" [(ngModel)]="searchComp" type="text" placeholder="Search Components..." />
<li *ngFor="#comp of record.components | search:searchComp " style="display:block;padding:0px;cursor:move;position:relative;margin-top:5px;margin-bottom:5px"
        title="{{comp.name}}">
    <p class="text-center h6" style="font-size:8px;color:blue;font-weight:bold;">
       {{comp.name }}
    </p>
    <img class="img-thumbnail1" src="{{comp.imgUrl}}" style="max-width:100%;" (click)="clicked(comp.name)">
</li>

3.search.pipe.ts

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

@Pipe({
    name: 'search',
    pure: false 
})
@Injectable()
export class SearchPipe implements PipeTransform {
    transform(components: any[], args: any): any {
        // filter components array, components which match and return true will be kept, false will be filtered out
        return components.filter((component)=>component.name.indexOf(args)!== -1);
        //return components;
    }

}

到目前为止它工作正常但是它区分大小写，我怎样才能让它不区分大小写？我试过 angularjs 1 逻辑为

*ngFor="#comp of record.components | search:searchComp :false"

但是没用。有什么建议么？提前致谢。

Answer 1

您可以尝试类似的方法：

@Pipe({
  name: 'search',
  pure: false 
})
@Injectable()
export class SearchPipe implements PipeTransform {
  transform(components: any[], args: any): any {
    var val = args[0];
    var lowerEnabled = args.length>1 ? args[1] : false;

    // filter components array, components which match and return true will be kept, false will be filtered out
    return components.filter((component)=> {
      if (lowerEnabled) {
        return (component.name.toLowerCase().indexOf(val.toLowerCase())!== -1);
      } else {
        return (component.name.indexOf(val)!== -1);
      }
    });
    //return components;
  }
}

并这样使用它：

*ngFor="#comp of record.components | search:searchComp:true"

看到这个 plunkr：https://plnkr.co/edit/cFNvstvWBWSG4l0UaPb2?p=preview。

使用管道的angular2不区分大小写的过滤器？

angular2 case insensitive filter using pipe?

json

case-insensitive

angular