如何在angular2中制作數組搜索過濾器？

Question

我創建一個文本框和一個數組。 我想根據文本框值過濾數組項。

  <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中的數組？

Answer 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)">