使用angular2中的管道动态搜索值列表

我对Angular 2不熟悉， 有人能告诉我如何在Angular2中实现一个值列表的动态搜索选项吗。当我键入单词时，列表必须只填充搜索的值。我试过使用ng2管道、ngx管道、角管道、Ng2FilterPipeModule。但它似乎不起作用。 这是HTML部分

   <input type="text" #mySearch placeholder="Search" [(ngModel)]="queryString">

  <div> Part ID </div>
  <div >Part Description</div>
  <div >Quantity </div>

 <div *ngFor="let vanInventory of showPartsOnVan | FilterPipe: queryString">
   <div class="col-4 align-left">{{vanInventory.partID}} </div>
   <div class="col-5 align-left">{{vanInventory.partDesc}}</div>
   <div class="col-3 align-left">{{vanInventory.quantity}}</div>
</div>

请参阅。这使用管道根据键入的值筛选结果

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { Pipe,PipeTransform} from '@angular/core';

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(items: any[], criteria: any): any {

        return items.filter(item =>{
           for (let key in item ) {
             if((""+item[key]).includes(criteria)){
                return true;
             }
           }
           return false;
        });
    }
}

应用程序内模块

 @NgModule({
      imports: [ BrowserModule ],
      declarations: [ App,SearchFilter ],
      bootstrap: [ App ]
    })

请参阅。这使用管道根据键入的值筛选结果

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { Pipe,PipeTransform} from '@angular/core';

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(items: any[], criteria: any): any {

        return items.filter(item =>{
           for (let key in item ) {
             if((""+item[key]).includes(criteria)){
                return true;
             }
           }
           return false;
        });
    }
}

应用程序内模块

 @NgModule({
      imports: [ BrowserModule ],
      declarations: [ App,SearchFilter ],
      bootstrap: [ App ]
    })

---

调试管道时，您会在返回语句中看到所需的数组？不，事实上，代码甚至没有使用这些管道正确编译。我甚至在我的应用程序模块中导入了管道和管道转换。你得到了什么错误？编译错误会很有用。我还听说，您不应该在管道中真正执行过滤和排序，因为每次渲染组件时都会执行过滤和排序，这可能比需要的次数要多。因此，从性能角度来看，这是一个坏主意。我会在要绑定的组件中有一个

showPartsOnVanFiltered

，在

OnChanges

hook.related上更新，建议阅读：）当调试管道时，您会在返回语句中看到所需的数组？不，事实上，代码甚至不能使用这些管道正确编译。我甚至在我的应用程序模块中导入了管道和管道转换。你得到了什么错误？编译错误会很有用。我还听说，您不应该在管道中真正执行过滤和排序，因为每次渲染组件时都会执行过滤和排序，这可能比需要的次数要多。因此，从性能角度来看，这是一个坏主意。我将在要绑定的组件中有一个

showPartsOnVanFiltered

，在

OnChanges

hook.related上更新，建议阅读：）我已按照您的代码进行了尝试，但我收到了一个编译器错误，如错误：未捕获（承诺）：错误：模板解析错误：无法找到管道“searchFilter”(“我已按照您的代码进行了尝试，但我遇到了一个编译器错误，例如，错误：未捕获（承诺中）：错误：模板分析错误：找不到管道‘searchFilter’（”