[解決済み] 未定義のプロパティ 'filter' を読み取ることができません。

質問

以下のようなエラーが発生します。

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

エラーの原因は何ですか？

どのように解決するのですか？

受信データは null とのことです。 filter メソッドがデータを期待していたため、エラーが発生しました。

ここでは、実際に動作する実装を紹介します。

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