如何在angular2中制作数组搜索过滤器？答案

【问题标题】：How to make array search filter in angular2?如何在angular2中制作数组搜索过滤器？
【发布时间】：2017-11-08 18:52:54
【问题描述】：

我创建了一个文本框和一个数组。我想根据文本框值过滤数组项。

 <div class="searchboxt"> <input type="text" placeholder="Search Tickets" 
 class="searchboxttext" [(ngModel)]="searchfav"/> </div>
 <li class="selectlistticket" *ngFor="let fav of (favlist.slice().reverse() 
 | SearchfilterPipe: searchfav)" (mouseover)="showfavstar(fav)" (mouseleave)
 ="hidefavstar(fav)">

如何在 angular2 中过滤数组？

【问题讨论】：

stackoverflow.com/questions/34417250/… 这可以帮助你。
stackoverflow.com/questions/37003551/… 请检查这对您有帮助
我需要一个代码，比如我在文本框中输入任何内容，而数组列表只需要显示相关行。在角度上，它很容易实现
AngularX 没有像 angularjs 那样带有过滤器管道，因为它们的性能很差并且阻止了激进的缩小。但是，如果您愿意，您可以轻松编写自己的 Pipes。我不会为您编写代码，但如果您想要一个零努力的解决方案，请选择一个 NPM 包，例如ng2-filter-pipe.
我为这个 nico 做了一个解决方案。请参考这个自定义管道以获得更好的结果

标签： javascript angular angular2-forms

【解决方案1】：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchfilter',
  pure: false
})
export class SearchfilterPipe implements PipeTransform {

  transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){
        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }
      }
      return false;
    });
  }
}

这和我预期的一样 100% 正常。将此保存为管道并将其导入 appmodule 和您的组件中。

   
     <div class="searchboxt"> <input type="text" placeholder="Search Tickets" class="searchboxttext" [(ngModel)]="searchfav"/> </div>

   <li class="selectlistticket" *ngFor="let fav of favlist.slice().reverse() | searchfilter :searchfav" (mouseover)="showfavstar(fav)" (mouseleave)="hidefavstar(fav)">

【讨论】：