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

Posted 2023-03-13

【中文标题】如何在angular2中制作数组搜索过滤器？

【英文标题】：How to make array search filter in 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 中过滤数组？

【问题讨论】：

***.com/questions/34417250/… 这可以帮助你。

***.com/questions/37003551/… 请检查这对您有帮助

我需要一个代码，比如我在文本框中输入任何内容，而数组列表只需要显示相关行。在角度上，它很容易实现

AngularX 没有像 angularjs 那样带有过滤器管道，因为它们的性能很差并且阻止了激进的缩小。但是，如果您愿意，您可以轻松编写自己的 Pipes。我不会为您编写代码，但如果您想要一个零努力的解决方案，请选择一个 NPM 包，例如ng2-filter-pipe.

我为这个 nico 做了一个解决方案。请参考这个自定义管道以获得更好的结果

【参考方案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)">