Ionic2, Angular2 and Pipes


#1

I am struggling with adding an angular2 pipe to my application. I have the following HTML displaying a list of employees that i would like to filter based on location. In this instance I am trying to filter my employees where location = 2.

 <ion-item-sliding *ngFor="#employee of employees | location:'2'">
 <ion-item-sliding>

The Pipe code is below. When I run it the error that I am receiving is

‘ORIGINAL EXCEPTION: TypeError: Unable to get property ‘filter’ of undefined or null reference’
and
’TypeError: Unable to get property ‘filter’ of undefined or null reference in [employees | location:‘2’ in Page1@7:23]’

 import {Pipe, PipeTransform, Injectable} from 'angular2/core'; 
 import {employee} from '../data/employee';

@Pipe({
    name: 'location'
 })

@Injectable()
export class LocationPipe implements PipeTransform{    
  
transform(employees: employee[], args: any[]) : any{
   
  return employees.filter(item => item.OfficeID.indexOf(args[0]) !== -1);
   
}   

}


#2

I would harden transform to handle the case where employees is null or undefined with something like this at the front:

if (!employees) {
  return [];
}

#3

Yeah, thats true, but I have confirmed in the logs that employees is not null in this case. Thanks!


#4

You may think you have, but the error message suggests otherwise.


#5

I tried adding in the code you suggested and I still get the same error. I agree based on the error it does look like employees array is null, however i can look at the logs and see that it is indeed populated. There are only a few dozen objects inside of it so i can verify each element.


#6

does it make a difference if you change ngFor to this?

*ngFor="#employee of (employees | location:‘2’)"