角度4過濾器搜索自定義管道

Question

所以我試圖建立一個自定義管道在ngFor循環中執行多個值的搜索過濾器。我已經找了好幾個小時做了一個很好的工作示例，其中大部分都基於以前的版本，似乎並不奏效。所以我正在構建Pipe並使用控制檯爲我提供值。但是，我似乎無法獲得輸入文本。

這裏是以前的地方我都找了找工作的例子：

Angular 4 Pipe Filter

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

這裏是我目前擁有的代碼：

component.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter> 

     <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query"> 
     <input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}"> 
     <label for="{{lock.ID}}" class="check-label"></label> 
     <h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3> 
     <h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3> 
     <h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3> 
     <h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3> 
     </div> 

pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'LockFilter' 
}) 

export class LockFilterPipe implements PipeTransform { 
    transform(locked: any, query: string): any { 
    console.log(locked); //this shows in the console 
    console.log(query); //this does not show anything in the console when typing 
    if(!query) { 
     return locked; 
    } 
    return locked.filter((lock) => { 
     return lock.User.toLowerCase().match(query.toLowerCase()); 
    }); 
    } 
} 

我已導入管插入模塊。

對於Angular 4我還是有點新，並且試圖弄清楚如何使這項工作成爲可能。無論如何感謝您的幫助！

我想我需要更具體。我已經在JS中構建了一個篩選器搜索，它不會過濾所有選項，這正是我想要做的。不只是過濾用戶名。我正在過濾所有4個數據。我選擇了一個Pipe，因爲這是Angular建議你在AngularJS中使用它們時所做的。我只是試圖重新創建我們在AngularJS中使用的過濾器管道，他們爲了性能而刪除了它們。我發現的所有選項都不起作用，或者來自以前的Angular版本。

如果您需要其他任何代碼，請告訴我。

Answer 1

您可以在輸入框中

filterNames(event) 
{ 
this.names_list = this.names_list.filter(function(tag) { 
return tag.name.toLowerCase().indexOf(event.target.value.toLowerCase()) >= 0; 
}); 
} 

希望它可以幫助的（輸入）事件中使用特定的函數，而不是..

Answer 2

我有我的地方，並在這裏實現搜索功能已更新您的代碼。請這樣做。

這是我必須更新的代碼。

目錄結構創建管

ng g pipe search 

component.html

app/ 
    _pipe/ 
     search/ 
      search.pipe.ts 
      search.pipe.spec.ts 
app/ 
    app.component.css 
    app.component.html 
    app.component.ts 
    app.module.ts 
    app.component.spec.ts 

命令運行

<input type="text" class="form-control" placeholder="Search" [(ngModel)]="query" id="listSearch"> 
    <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query"> 
    <input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}"> 
    <label [for]="lock.ID" class="check-label"></label> 
    <h3 class="card-text name">{{lock.User}}</h3> 
    <h3 class="card-text auth">{{lock.AuthID}}</h3> 
    <h3 class="card-text form">{{lock.FormName}}</h3> 
    <h3 class="card-text win">{{lock.WinHandle}}</h3> 
</div> 

component.js

注意：在這個文件中，我必須使用虛擬記錄來實現和測試目的。

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
    export class AppComponent implements OnInit{ 
    public search:any = ''; 
    locked: any[] = []; 

    constructor(){} 

    ngOnInit(){ 
     this.locked = [ 
      {ID: 1, User: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'}, 
      {ID: 2, User: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'}, 
      {ID: 3, User: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'}, 
      {ID: 4, User: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'}, 
     ] 
    } 
} 

module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 
import { SearchPipe } from './_pipe/search/search.pipe'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    SearchPipe 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'LockFilter' 
}) 

export class SearchPipe implements PipeTransform { 
    transform(value: any, args?: any): any { 

     if(!value)return null; 
     if(!args)return value; 

     args = args.toLowerCase(); 

     return value.filter(function(item){ 
      return JSON.stringify(item).toLowerCase().includes(args); 
     }); 
    } 
} 

我希望你所得到的管功能，這將幫助你。