Фильтровать реализацию поисковой трубы

Question

Я фильтрую элементы, используя канал для фильтрации

Мои входные данные находятся в файле search.html, а Itemlist - в файле List.html.

Изменение в модели не запускает трансформацию трубы. Пожалуйста помоги. Ниже приведен фрагмент кода.

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

Хорошо, основываясь на нашей дискуссии и мнениях, я думаю, что у меня есть ответ. По сути, вам не хватает связи между компонентами

Компонент поиска:

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