フィルター検索パイプの実装

Question

私はフィルタリングするためにパイプを使用してアイテムをフィルタリングしてい

モデルではないに提出された私の入力は

変更を提出するlist.htmlでsearch.htmlのファイルとITEMLISTでありますパイプ変換をトリガする。 助けてください。以下はコードスニペットです。

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]を、私たちの議論とplunksに基づいて、私は答えを持っていると思います。 （リスト付き）

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

その後、いくつかの親コンポーネント

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' }, 
    ] 
} 

し、最終的に取り組んでplunk：http://plnkr.co/edit/TzNQfDQ8K7d81ST9qKj5?p=preview