2016-11-21 3 views
0

Ich habe eine Frage zu Filtern. Ich habe eine Komponente, die ein Suchfeld enthält, und eine Komponente, die Daten von einem API anzeigt und beide funktionieren. Allerdings habe ich einen Filter, der Daten anzeigen soll, was der Benutzer eingibt. Ich bekomme keinen Fehler, wenn ich das Suchfeld eintippe, aber ich bekomme auch keine Ergebnisse. Ich bin irgendwie fest, kann mir jemand mit einigen Ideen helfen.Angular 2 Suchfilter angewendet in verschiedenen Komponenten

Wie kann ich eine Pipe auf eine separate Komponente für die Suche und eine Komponente für die Liste der Daten verwenden. ?

search.pipe.ts:

 import { Pipe, PipeTransform } from '@angular/core'; 
      @Pipe({ 
       name: 'searchPipe' 
      }) 
      export class SearchPipe implements PipeTransform { 

      transform(data: any, search_term: any): any { 
       if (search_term === undefined) return data; 
       else { 
        return data.filter(function (data){ 
         return  data.name.toLowerCase().inlcudes(search_term.toLowerCase()); 
      }) 
      } 
     } 

} 

data.component.html kurze Version:

<tbody *ngFor="let test of abtest | searchPipe:search_term"></tbody> 

search.component.html

<form> 
    <div class="mdl-textfield mdl-js-textfield"> 
    <div class="mdl-select mdl-js-select"> 
     <select class="mdl-select__input" id="option" name="option"> 
     <option value=""></option> 
     <option value="option1">option 1</option> 
     <option value="option2">option 2</option> 
     <option value="option3">option 3</option> 
     <option value="option4">option 4</option> 
     <option value="option5">option 5</option> 
     </select> 
    </div> 
     <i class="mdl-textfield__icon material-icons">search</i> 
     <input id="tf1" type="text" class="mdl-textfield__input mdl-shadow--2dp" #input [(ngModel)]="search_term" name="search_term" (keyup) = "0" /> 
     <label for="tf1" class="mdl-textfield__label">Search</label> 
    </div> 
</form> 
+0

Ich denke, Sie könnten 'serivce' verwenden, definieren' search_term' im Dienst und dann importieren Sie es in Suche und Datenkomponente. –

Antwort

0

Ich denke, das für Arbeit wird Anstatt mit inlcudes zu arbeiten, versuchen Sie es mit indexOf. E, g

Verwandte Themen