Angular 4 Filtre Rechercher un tuyau personnalisé

Question

Donc j'essaye de construire un tuyau personnalisé pour faire un filtre de recherche de plusieurs valeurs dans une boucle ngFor. J'ai cherché un bon nombre d'heures pour un bon exemple de travail, et la plupart d'entre eux sont basés sur des versions précédentes et ne semblent pas fonctionner. Donc, je construisais le tuyau et en utilisant la console pour me donner les valeurs. Cependant, je n'arrive pas à voir apparaître le texte d'entrée.

Voici les endroits précédents, je l'ai regardé pour trouver des exemples de travail:

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

Voici le code que j'ai actuellement:

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

J'ai importé le tuyau dans le module.

Je suis encore un peu plus jeune à Angular 4 et j'essaie de comprendre comment faire ce travail. En tout cas merci pour votre aide!

Je suppose que je devrais être plus précis. J'ai déjà construit une recherche de filtre dans JS qui ne filtre pas toutes les options, ce que j'essaie de faire. Pas seulement filtrer le nom d'utilisateur. Je filtre les 4 éléments de données. J'ai choisi un Pipe car c'est ce que Angular vous suggère de faire comme ils l'ont initialement utilisé dans AngularJS. J'essaie simplement de recréer le tuyau de filtre que nous avions dans AngularJS qu'ils ont enlevé pour la performance. Toutes les options que j'ai trouvées ne fonctionnent pas, ou sont des versions précédentes d'Angular.

Si vous avez besoin de quelque chose d'autre de mon code, faites-le moi savoir.

Answer 1

Vous pouvez utiliser la place fonction donnée sur la (entrée) événement de votre boîte d'entrée

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

Hope it helps ..

Answer 2

Je dois implémenter la fonctionnalité de recherche dans mon local et ici est mis à jour votre code. s'il vous plaît faites de cette façon.

Voici le code que je dois mettre à jour.

répertoire Structure

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 

course de commande pour la création de tuyau

ng g pipe search 

component.html

<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

Remarque: Dans ce fichier, je dois utiliser des enregistrements fictifs à des fins d'implémentation et de test.

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

J'espère que vous obtenez la fonctionnalité de conduite et cela vous aidera.