角2的搜索框不會返回整個對象

Question

我對Angular2和4非常陌生。 我有一個class（Item）類型的項目列表。 項目字段是名稱，價格和描述。 我想在用戶鍵入項目名稱時創建一個搜索框，它顯示正確的項目對象。

我跟着這個例子：http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html 但它沒有工作，我認爲是因爲如果是在字符串之間搜索而不是類型項目的對象。

Answer 1

如果您使用的代碼在本教程中，有對象的數組，你只需要更新變換方法的return語句在Angular2管這樣的：

return value.filter(function (el: any) { 
       return el.name.toLowerCase().indexOf(input) > -1; 
      }) 

PS：我添加了el.name，但您可以搜索整個描述或任何您喜歡的內容。

Answer 2

創建一個自定義管道，並通過搜索參數，該管道，類似例子

下面

<li *ngFor="let n of list | FilterPipe: queryString : searchableList "> 
     {{n.name}} ({{n.age}}) 
</li> 

this.searchableList = ['name','age'] 

以及自定義管

@Pipe({ 
    name: 'FilterPipe', 
}) 
export class FilterPipe implements PipeTransform { 
    transform(value: any, input: string,searchableList : any) { 
     if (input) { 
      input = input.toLowerCase(); 
      return value.filter(function (el: any) { 
       var isTrue = false; 
       for(var k in searchableList){ 
        if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){ 
        isTrue = true; 
        } 
        if(isTrue){ 
        return el 
        } 
       } 

      }) 
     } 
     return value; 
    } 
} 

More info