Angular 2自定义管道过滤器问题答案

【问题标题】：Angular 2 Custom pipe filer issueAngular 2自定义管道过滤器问题
【发布时间】：2017-07-03 10:22:22
【问题描述】：

当我在ngfor 循环中的自定义管道中使用女性时，我想在employeemale.ts 组件中使用自定义管道根据男性和女性过滤数据，它根据女性显示数据：

作品：

<ng-container *ngFor="let empLists of empList | filterdata:'female'">

但是当我使用 men 时，它会显示所有 json 数据

不起作用：

<ng-container *ngFor="let empLists of empList | filterdata:'male'">

这是我的组件 html

<div class="widget box">
    <div class="widget-header"> <h4><i class="fa fa-bars"></i> Female Employe Details</h4></div>
</div>

当我根据女性过滤数据时：

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

@Pipe({
  name: 'filterdata'
})
export class FilterdataPipe implements PipeTransform {

  transform(empList: Array<any>, arg: string): any {
    debugger
    return empList.filter(function(empLists){
      //console.log(empLists)
           return empLists.gender.toLowerCase().includes(arg.toLowerCase());
    })
  }

}
<div class="widget-content">
<table class="table table-bordered">
   <thead>
    <tr>
      <th>#employee ID</th>
      <th>Name</th>
       <th>Gender</th>
    </tr>
  </thead>

       <ng-container *ngFor="let empLists of empList | filterdata:'male'">
 <tr>
      <th>{{empLists.id}}</th>
       <th>{{empLists.fullName}}</th>
       <th>{{empLists.gender}}</th>

    </tr>
  </ng-container>
  </tbody>
</table>

这是我的自定义管道 filterdata.pipe.ts

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

@Pipe({
  name: 'filterdata'
})
export class FilterdataPipe implements PipeTransform {

  transform(empList: Array<any>, arg: string): any {
    debugger
    return empList.filter(function(empLists){
      //console.log(empLists)
           return empLists.gender.toLowerCase().includes(arg.toLowerCase());
    })
  }
}

【问题讨论】：

是的，男性被纳入女性return empLists.gender.toLowerCase().includes(arg.toLowerCase());
完全猜测，但是否与字符串“female”中出现“male”一词有关？

标签： angular angular2-custom-pipes

【解决方案1】：

只需使用相等而不是包含：

transform(empList: Array<any>, arg: string): any {
return empList.filter(function(emp){
  //console.log(empLists)
       return emp.gender.toLowerCase() === arg.toLowerCase();
});

使用 include 会失败，因为你的 'female' 里面有一个 'male'

【讨论】：