필터 검색 파이프 구현

Question

I 필터링 파이프를 사용하여 항목을 필터링하고있어

모델이 아니다 제기 내 입력

변경 파일 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

좋아, 우리의 토론과 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' }, 
    ] 
} 

마지막 작업 쿵하는 소리 : http://plnkr.co/edit/TzNQfDQ8K7d81ST9qKj5?p=preview