İyonik 2: Adıma göre async listesini filtrelemek için boru

Question

S) Aşağıdaki sözdizim/kodumun nesi yanlış?

Öğeler listemi name özelliğine göre filtrelemek istiyorum. Aşağıda kod ile denedim ama hata alıyorum:

tanımsız

Not malı 'toLowerCase' okunamadı: Sorgu sayfa yüklemesinde boş bir dize olarak tanımlanır yani

var query = ""; 

Benim şablonu:

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

Benim filtresi:

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

parametreleri doğru sırada değildir ve ikinci parametresi bir dizi olmalıdır:

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

ilk parametre boru istediğiniz değeri/liste uygulanacak ve ikinci bir parametre (ler).

fazla ayrıntı için bu dokümanı bakınız:

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

ve kullanım:

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

Answer 2

İşte benim çalışma (kişiler için) versiyonu

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