Ionic 2：按名称过滤异步列表的管道属性

Question

问）我下面的syntax/code有什么问题？

我想按名称属性过滤我的项目列表。我尝试使用下面的代码，但出现错误：

无法读取未定义的属性'toLowerCase'

注意：查询在页面加载时定义为空字符串，即

var query = "";

我的模板：

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

我的过滤器：

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

参数顺序不正确，第二个参数必须是数组：

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

第一个参数是您希望应用管道的值/列表，第二个参数是您的参数。

有关详细信息，请参阅此文档：

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

Answer 2

这是我的工作版本（用于联系人）：

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

和用法：

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

Ionic 2：按名称过滤异步列表的管道属性

Ionic 2: Pipe to filter async list by name property

typescript

angular

ionic2

pipes-filters

Ionic 2：按名称过滤异步列表的管道 属性

Ionic 2: Pipe to filter async list by name property

typescript

angular

ionic2

pipes-filters

Ionic 2：按名称过滤异步列表的管道属性