filtre de mise en œuvre tuyau de recherche

Question

Je filtrer les éléments à l'aide du tuyau pour filtrer

Mon entrée est déposé dans le fichier search.html et dans le fichier Liste de produits list.html

changement dans le modèle n'est pas déclencher la transformation du tuyau. S'il vous plaît aider. Voici l'extrait de code ci-dessous.

search.html

<input placeholder="keyword..." [(ngModel)]="search"/> 

list.html

<div *ngFor="let item of items | searchPipe:'name':search "> 
    {{item.name}} 
</div> 

Search.pipe.ts

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

@Pipe({ 
    name : 'searchPipe', 
}) 
export class SearchPipe implements PipeTransform { 
    public transform(value, key: string, term: string) { 
    return value.filter((item) => { 
     if (item.hasOwnProperty(key)) { 
     if (term) { 
      let regExp = new RegExp('\\b' + term, 'gi'); 
      return regExp.test(item[key]); 
     } else { 
      return true; 
     } 
     } else { 
     return false; 
     } 
    }); 
    } 
} 

Answer 1

Ok, d'après notre discussion et plunks je pense avoir une réponse . Au fond ce que vous manque une communication entre les composants

composant de recherche:

import { Component, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'my-search', 
    template: ` 
    <input placeholder="keyword..." [(ngModel)]="search" (keyup)=onChange()/> 
    ` 
}) 

export class SearchComponent { 
    search: String; 
    @Output() onSearchChange = new EventEmitter<Object>(); 

    onChange($event) { 
    this.onSearchChange.emit(this.search); 
    } 
} 

puis certains composant parent (avec liste)

import { Component } from '@angular/core'; 
import { SearchComponent } from './search.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Search pipe test</h1> 
    Search: <my-search (onSearchChange)="search = $event"></my-search> 
    <br/>  
    <br/> 
     <div *ngFor="let item of items | searchPipe:'name':search "> 
     {{item.name}} 
     </div> 
    ` 
}) 
export class AppComponent { 
    search: String; 
    items: Array<any> = [ 
    { id: 1, name: 'aaaaa' }, 
    { id: 2, name: 'bbbbb' }, 
    { id: 3, name: 'ccccc' }, 
    { id: 4, name: 'aabb' }, 
    { id: 5, name: 'bbcc' }, 
    ] 
} 

et travailler enfin Plunk: http://plnkr.co/edit/TzNQfDQ8K7d81ST9qKj5?p=preview