Angular 2: текстовый фильтр при изменении вводимого текста

Angular2, в моем component.ts я беру список видеообъектов и сохраняю в _videos:Video[]

В моем html я показываю видео,

<tr *ngFor="#video of _videos">

Теперь я хочу создать поле ввода поиска в html для фильтрации видео. Я пытаюсь использовать канал:

import {Pipe,PipeTransform} from 'angular2/core';

@Pipe({
  name: 'textfilter'
})

export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

in ts,

private _videoTitleFilter: string ='';

in html,

  <tr>
    <th><input id="videoTitleFilter" placeholder="Filter">{{_videoTitleFilter}}</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr *ngFor="#video of _videos |textfilter:'title':_videoTitleFilter">

Кажется, привязка не работает. Труба работает впервые. Правильно ли использовать трубу здесь? Или я должен создать новый массив _videoList: Video[], прослушать событие keyup с дроссельной заслонкой, чтобы изменить _videoList и использовать его в *ngFor вместо _videos?


angular angular2-pipe
person Hammer    schedule 11.05.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете сделать свою трубу не чистой:

@Pipe({
  name: 'textfilter',
  pure: false
})
export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

Этот вопрос может помочь вам:

person Thierry Templier    schedule 11.05.2016
comment
Tks Thierry, изменил, до сих пор нет обновления. Я прочитаю пост. Пожалуйста, обратите внимание, что на моем _videos нет обновлений. Он остается неизменным после получения http. - person Hammer; 11.05.2016
comment
Как ваш ввод связан со свойством _videoTitleFilter? - person Thierry Templier; 11.05.2016
comment
Плохо, я перехожу на ngModel. спасибо - person Hammer; 12.05.2016