Angular Pipe can not filter every column

Question

I am using Angular6 Pipe. I have a list of array which shown in a table. I want to filter every column of that table. I am capable to filter of first three column of the table but last column(Capacity) does not work. It shows error. I thought may be the field is integer that's why i get errors. Please guide me how to solve this problem.

stackblitz link here

//ts file

campusFilter = '';
roomFilter = '';
roomTypeFilter = '';
capacityFilter = '';

roomInfoList: any = [
{
 id: 101,
 campus: 'Ashulia',
 room: '201AB',
 roomType: 'Theory',
 capacity: 30
},
{
id: 102,
campus: 'Dhaka',
room: '300',
roomType: 'Lab',
capacity: 35
},
{
id: 103,
campus: 'Khulna',
room: '300B',
roomType: 'Theory',
capacity: 50
},
{
id: 104,
campus: 'Khulna',
room: '102',
roomType: 'Lab',
capacity: 50
},
{
id: 105,
campus: 'Ashulia',
room: '201AB',
roomType: 'Lab',
capacity: 120
}
]

//pipe filter file

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

@Pipe({
  name: 'routineFilter'
})
export class ArrfilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === '') {
    return value;
  }
  const resultArray = [];
  for (const item of value) {
    if (item[propName] === null) {

   } else if 
   (item[propName].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) 
   {
    resultArray.push(item);
   }
  }
  return resultArray;
 }}

//html file

<table border="1">
  <tr>
   <td>
    <input type="search" placeholder="Campus" name="campusFilter" 
    [(ngModel)]="campusFilter">
  </td>
  <td>
      <input type="search" placeholder="Room" name="roomFilter" 
    [(ngModel)]="roomFilter">
  </td>
  <td>
    <input type="search" placeholder="Room Type" name="roomTypeFilter" 
    [(ngModel)]="roomTypeFilter">
  </td>
  <td>
    <input type="search" placeholder="Capacity" name="capacityFilter" 
    [(ngModel)]="capacityFilter">
  </td>
 </tr>
 <tr>
  <th>Campus</th><th>Room</th><th>Room Type</th><th>Room Capacity</th>
 </tr>
 <tbody>
   <tr *ngFor="let roomInfo of roomInfoList | routineFilter: campusFilter: 
     'campus' | routineFilter: roomFilter: 'room'
     | routineFilter: roomTypeFilter: 'roomType' | routineFilter: 
     capacityFilter: 'capacity' ">
    <td>{{roomInfo.campus}}</td>
    <td>{{roomInfo.room}}</td>
    <td>{{roomInfo.roomType}}</td>
    <td>{{roomInfo.capacity}}</td>
   </tr>
 </tbody>
</table>

Alex Cr Alex Cr · Accepted Answer · 2019-05-21T09:42:12

I would easily convert int to string:

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

@Pipe({
  name: 'routineFilter'
})
export class ArrfilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === '') {
      return value;
    }
    const resultArray = [];
    for (const item of value) {
      if (item[propName] === null) {
      } else if (item[propName].toString().toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }

}

Angular Pipe can not filter every column

1 Answers