Question

问：我的语法/代码有什么问题？

我想通过name属性过滤我的项目列表。我已尝试使用下面的代码，但收到错误：

无法读取未定义的属性'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：管道按名称属性过滤异步列表

2 个答案: