Angular 2搜索過濾器應用於不同的組件

我有一個關於過濾器的問題。我有一個包含搜索框的組件，以及一個顯示api數據的組件，它們都可以工作。但是，我有一個過濾器，應根據用戶輸入的內容顯示數據。我在搜索框中輸入時沒有出現任何錯誤，但我也沒有得到任何結果。我有點卡住了，誰能幫我一些想法。Angular 2搜索過濾器應用於不同的組件

如何在單獨的組件上使用管道進行搜索，併爲數據列表使用組件。？

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短版：

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

來源

2016-11-21 A.Wad

我想你可以使用'serivce'，在服務中定義'search_term'，然後將它導入到搜索和數據組件。 –

我認爲這會爲工作你，而不是使用inlcudes，嘗試使用indexOf。 E，g

data.name.toLowerCase().indexOf(search_term.toLowerCase());

來源

2016-11-23 15:11:07

Angular 2搜索過濾器應用於不同的組件

回答

相關問題