Q) What could be causing the error in my code's syntax?
I am attempting to filter a list of items by their name property. However, the following code is resulting in the error:
Cannot read property 'toLowerCase' of undefined
Please note: The variable query is initially set as an empty string when the page loads.
var query = "";
This is my template:
<ion-card *ngFor="#item of (items | clientNameFilter:query)">
<img [src]="getItemImage(item)" (click)="editItem(item)"/>
<ion-card-content (click)="editItem(item)">
<h2 class="card-title">{{item.name}}</h2>
<p>{{item.address.name}}</p>
<p>{{item.address.addressLine1}}</p>
<p>{{item.address.town}}</p>
<p>{{item.address.postcode}}</p>
</ion-card-content>
</ion-card>
Here is my filter logic:
import {Pipe, PipeTransform} from 'angular2/core';
import {Client} from '../interfaces/client';
@Pipe({
name: 'clientNameFilter',
pure: false
})
export class ClientNameFilterPipe implements PipeTransform {
transform(query: string, clients: Client[]) {
return clients.filter(client =>
client.name.toLowerCase().indexOf(query) > -1
);
}
}