无法读取未定义的属性“过滤器”答案

【问题标题】：Cannot read property 'filter' of undefined无法读取未定义的属性“过滤器”
【发布时间】：2017-02-02 01:23:36
【问题描述】：

我收到如下错误：

Cannot read property 'filter' of undefined.

组件模板：

<input #input placeholder="Search" id="search">
<div class="item" *ngFor="let item of data | searchPipe: input.value">
  {{item}}
</div>

管道代码：

@Pipe({
  name: 'searchPipe',
  pure: false
})
export class SearchPipe implements PipeTransform {
  transform(data: any[], searchTerm: string): any[] {
    searchTerm = searchTerm.toUpperCase();
    return data.filter(item => {
      return item.toUpperCase().indexOf(searchTerm) !== -1 
    });
  }
}

导致错误的原因是什么？

【问题讨论】：

标签： angular typescript

【解决方案1】：

由于传入的数据是null 并且filter 方法需要数据，因此，这导致了错误。

这是一个有效的实现：

transform(items: any[], filterQuery: any): any[] {
  if (!filterQuery) return items;
  return items.filter(item => item.whateverProperty.toLowerCase().includes(filterQuery.toLowerCase()));
}

【讨论】：

【解决方案2】：

试试这个：

export class SearchPipe implements PipeTransform {
  transform(data: any[], searchTerm: string): any[] {
    if(!data) return [];
    searchTerm = searchTerm.toUpperCase();
    return data.filter(item => {
      return item.toUpperCase().indexOf(searchTerm) !== -1 
    });
  }
}

【讨论】：