Ionic 2: Pipe zum Filtern der Async-Liste nach Name Eigenschaft

Question

Q) Was ist falsch an meiner Syntax/Code unten?

Ich möchte meine Liste von Elementen mit dem Namen Eigenschaft filtern. Ich habe unten mit dem Code versucht, aber ich erhalte die Fehlermeldung:

Kann nicht Eigentum ‚toLowerCase‘ undefinierten

Hinweis lesen: Abfrage ist definiert als eine leere Zeichenfolge auf Seite Last dh

var query = ""; 

Meine Vorlage:

<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> 

Mein Filter:

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 
    ); 
    } 
} 

Answer 1

Die Parameter sind nicht in der richtigen Reihenfolge und der zweite Parameter muss ein Array sein:

@Pipe({ 
    name: 'clientNameFilter' 
}) 
export class ClientNameFilterPipe implements PipeTransform { 
    transform(clients: Client[], params: string[]) { 
    let query = params[0]; 
    return clients.filter(client => 
     client.name.toLowerCase().indexOf(query) > -1 
    ); 
    } 
} 

Der erste Parameter ist der Wert/list man das Rohr innen in und die angewendet werden zweitens deine Parameter.

Sehen Sie dieses Dokument für weitere Informationen:

• https://angular.io/docs/ts/latest/api/core/PipeTransform-interface.html

Answer 2

Hier ist meine Arbeitsversion (für Kontakte):

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

@Pipe({ 
    name: 'contactNameFilter' 
}) 
export class ContactNameFilterPipe implements PipeTransform { 
    transform(contacts: Array<any>, searchTerm: string) : Array<any> { 
    if (contacts == null) { 
     return []; 
    } 
    if (searchTerm == null) { 
     return contacts; 
    } 
    return contacts.filter(contact => { 
     return `${contact.firstName} ${contact.lastName}`.toLowerCase().indexOf(searchTerm) > -1; 
    }); 
    } 
} 

und Nutzung:

<ion-item *ngFor="let contact of (contacts | async | contactNameFilter:searchTerm)">