angular2 rxjs 过滤线程与输入文本

Question

您好，我正在建立一个小型 Whosebug-like 论坛，我正在尝试为我的 threads-titles.

实现一个简单的 text-filter

我最近开始学习 rxjs 和管道，所以这是我到目前为止遇到的两个问题

我不确定应该使用哪种方法来解析标题，我目前正在使用 string.include() 但它无法正常工作（例如，如果我输入 who，那么 "how" 显示，如果我输入 "how" 然后 "who" 显示...

更新：到目前为止，主要错误似乎是管道只收到第一个字母……但不知道是什么原因造成的。

我使用的是纯管道，属性通过主题传递给它，不确定这是否是最佳实践方式...

https://plnkr.co/edit/VViLYFd5oFTwNqP9eoZi?p=preview

感谢您的帮助和建议

组件

@Component({
  selector: 'dashboard-main',
  pipes:[FilterTitle],
  template:`
  <input type="text" id="title" [(ngModel)]="binding" (keyup)="trigger()">
  <h3>{{binding}}</h3>
  <hr>
  <h3>{{testText}}</h3>
<hr>
<ul>
<li *ngFor="#thread of threadlist | filterTitle:testText">{{thread.title}}</li>
</ul>
  `
})
export class DashboardMainComponent implements OnInit{

  binding:string='Input';
  text$:Subject<string> = new Subject<string>();
  testText:string="";

  ngOnInit():any {
    this.text$.debounceTime(500).distinctUntilChanged().subscribe( text => this.setText(text))
  }

  trigger(){
    this.text$.next(this.binding);
  }

  setText(text:string){
    console.log(text);
    this.testText = text;
  }

  threadlist=[
    {
      title:'Who are you?'
    },
     {
      title:'How are you?'
    },
     {
      title:'Where are you?'
    }
    ]
}

管道

@Pipe({
  name:'filterTitle',

})

export class FilterTitle implements PipeTransform{
    transform(array:any[], [search]):any {
      if(search ===''){
        return array
      }
      return array.filter(thread => {
        return thread.title.includes(search)
      })
    }
}

Answer 1

管道中的参数声明错误。应该是

transform(array:any[], search):any {

而不是

transform(array:any[], [search]):any {

因为 beta.16 管道不再传递数组或参数。每个值都作为一个独特的参数传递 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26

Plunker example

angular2 rxjs 过滤线程与输入文本

angular2 rxjs filter threads with input text

text

filter

angular

rxjs5

angular2-pipe