angular2 case insensitive Filter mit Rohr?

Question

Ich möchte wissen, wie Sie Vergleiche für die Suche mit Rohren in angular2 Vergleiche ohne Berücksichtigung der Groß- und Kleinschreibung durchführen können.

unten ist der Ansatz, den ich bisher verwendet habe.

Seine Suche die Komponenten richtig, aber ist Groß-und Kleinschreibung.

Wie kann ich es case-insensitive machen?

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" 
    } 

nachdem dieses JSON-Daten zu lesen Ich bin Durchführung einer Suchoperation Rohr mit folgenden Code verwenden.

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; 
    } 

} 

seine bisher richtig funktioniert, aber es ist case-sensitive, Wie kann ich Ist das nicht der Fall? Ich versuchte AngularJS 1 Logik als

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

aber es hat nicht funktioniert. irgendwelche Vorschläge? danke im voraus.

Answer 1

Man könnte so etwas versuchen:

@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; 
    } 
} 

und es auf diese Weise verwenden:

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

dieses plunkr Siehe: https://plnkr.co/edit/cFNvstvWBWSG4l0UaPb2?p=preview.