Question

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

<{1>}中的

，

ts

<{1>}中的

，

private _videoTitleFilter: string ='';

似乎绑定无效。管道第一次工作。在这里使用烟斗是否正确？或者我应该创建一个新数组html，使用限制来监听keyup事件以更改<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[]而不是_videoList中使用它？

Answer 1

你可能会让你的烟斗不纯净：

temp[temp$Time >= 24/24 & temp$Time <= 1/24, ]

这个问题可以帮到你：

NgFor doesn't update data with Pipe in Angular2

Angular 2：输入文本更改的文本过滤器

1 个答案: