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

【问题标题】：Angular2: FilterPipe : Cannot read property 'filter' of undefinedAngular2：FilterPipe：无法读取未定义的属性“过滤器”
【发布时间】：2017-10-15 13:36:58
【问题描述】：

我一直在尝试为我的项目构建一个过滤管道，它通过字符串数组进行过滤。它正在工作，但我仍然遇到错误。我不知道这是为什么？我还想问是否有办法使过滤器更通用，以便我可以将其用于其他字符串。

这是管道：

import { Pipe, PipeTransform } from '@angular/core';
import {Afdelingen} from "../models";

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(afdeling:Afdelingen[]) {
    return afdeling.filter(afd => afd.afdelingsNaam == 'pediatrie');
    }
}

我的 HTML 只是用于测试，但它是这样的：

<div *ngFor="let afd of afdeling | filter">
  {{afd.afdelingsNaam}}

</div>

我还添加了一张图片，您可以看到它正在工作，但我遇到了错误。 Error

编辑：通用搜索管道：

import { Pipe, PipeTransform } from '@angular/core';
import {Afdelingen} from "../models";

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(afdeling:Afdelingen[], value:string) {
    if (!afdeling)
      return afdeling;
    return afdeling.filter(afd => afd.afdelingsNaam == value);
  }
}

【问题讨论】：

第一次调用过滤管道时，afdeling 可能是未定义的。您需要检查管道中afdeling 中是否有值:)

标签： angular filter pipe angular-pipe

【解决方案1】：

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

@Pipe({
   name: 'filterbytag'
 })
export class FilterbytagPipe implements PipeTransform {

transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
  return items.filter(it => {
  return it.toLowerCase().includes(searchText);
  });
}
}

【讨论】：

请edit 您的回答并添加一些说明您的代码如何/为什么解决问题。仅代码答案被视为低质量帖子

【解决方案2】：

您可以在管道中添加此检查：

transform(afdeling:Afdelingen[]) {
    if (!afdeling)
        return afdeling;
    return afdeling.filter(afd => afd.afdelingsNaam == 'pediatrie');
}

这样你就可以摆脱破坏性异常

【讨论】：

谢谢，解决了。我还能够制作更通用的管道！