angularangular2-custom-pipes

Angular 2 Custom pipe filer issue


I want to filter data according to men and women with custom pipe in employeemale.ts component when I use female in custom pipe in ngfor loop it shows data according to female:

Works:

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

but when I use men it shows all the json data

Doesn't work:

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

This is my component html

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

When I filter data according to female it's:

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>

This is my custom pipe 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());
    })
  }
}

Solution

  • simply use equality instead of include :

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

    Using include will fail because there is a 'male' inside your 'female'