Question

我是Angular 2的新手，有人可以告诉我如何为Angular2中的值列表实现动态搜索选项。当我输入单词时，列表必须仅填充搜索的值。我尝试过使用ng2-pipes，ngx-pipes，angular pipes，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>

这是我的Pipe.ts文件

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'FilterPipe',
})
export class Ng2FilterPipeModule implements PipeTransform {
    transform(value: any, input: string) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any) {
                return el.toLowerCase().indexOf(input) > -1;
            })
        }
        return value;
    }
}

＆＃13;

Answer 1

请参阅https://plnkr.co/edit/I7ljThUro6lBEk2v7nEj?p=preview。这会使用管道根据输入的值过滤结果。

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

在app模块中

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

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

1 个答案: