Question

我从api接收数据，我想通过角度4管道过滤数据，但出现错误。我有三种输入类型，我想通过输入类型过滤数据。

html文件

  <input type="email" class="form-control"  placeholder="Enter email" name="email" [(ngModel)]="usernameSearch">
</div>
<div class="form-group">
  <input type="text" class="form-control"  placeholder="Enter userId" name="text" [(ngModel)]="userIdSearch">
</div>
<div class="form-group">
  <input type="text" class="form-control" placeholder="Enter email" name="text" [(ngModel)]="emailSearch">
</div>    
<table style="width:100%;" class="allDatatable" [mfData]="datas | 
 customfilter : usernameSearch : userIdSearch : emailSearch" 
 #mf="mfDataTable" [mfRowsOnPage]="10">
    <tr *ngFor="let data of mf.data">
        <td>{{data.username}}</td>          
        <td>{{data.email}}</td>         
        <td>{{data.phone}}</td>
        <td>{{data.userType}}</td>          
        <td>{{data.userId}}</td>

自定义pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
   name: 'customfilter'
})
export class CustomfilterPipe implements PipeTransform {
 transform(items: any[], usernameSearch: string, userIdSearch: string, 
 emailSearch: string){
    if (items && items.length){
        return items.filter(item =>{
            if (usernameSearch && 
   item.username.toLowerCase().indexOf(usernameSearch.toLowerCase())=== -1){
                return false;
            }
            if (userIdSearch && 
   item.userId.toLowerCase().indexOf(userIdSearch.toLowerCase()) === -1){
                return false;
            }
            if (emailSearch && 
 item.email.toLowerCase().indexOf(emailSearch.toLowerCase()) === -1){
                return false;
            }
            return true;
       })
    }
    else{
        return items;
    }
 }
}

Answer 1

在pipe.ts中

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from "lodash";

@Pipe({
  name: 'dataFilter'
})
export class DataFilterPipe implements PipeTransform {
  transform(array: any[], query: string): any {
    if (query) {
      console.log('pipe', query);  // <= Check here if your data are ok!
      return _.filter(array, row => row.YOUR_ROW_PROP.indexOf(query) > -1);
    }
    return array;
  }
}

Angular 5中一个数据表的多重过滤

1 个答案: