Angular，过滤器管道返回空数据/假答案

【问题标题】：Angular, Filter pipe returns empty data/falseAngular，过滤器管道返回空数据/假
【发布时间】：2017-11-20 02:34:45
【问题描述】：

我正在尝试遵循此 link 中的自定义过滤器管道教程，但是当我在浏览器上运行我的项目时，表格变为空。我不确定我必须做些什么来纠正这个问题。我已经使用 import import { FilterPipe } from './filter.pipe'; 到 app.component.ts 并在 module.ts 中声明。

//filter.pipe.ts

transform(productList: any, term: any): any {
  if (term === undefined) return productList;

  //not sure, but i think it causes by this line
  return productList.filter(function(Product) {
    return Product.prdName.toLowerCase().includes(term.toLowerCase());
  })
}

<form id="filter">
  <input type="text" class="form-control" name="term" [(ngModel)]="term" placeholder="filter by name" />
</form>

<tr *ngFor="let product of productList | filter: term">
  <td>{{product.prdName}}</td>
  <!--other table data-->
  <td>

当我删除 | filter: term" 部分时，表格数据显示，但当我将其放回时，表格数据什么也没有显示。有人可以帮我解决这个问题吗？对不起我的英语不好。

【问题讨论】：

也许term 为null，而不是未定义，所以它通过第一个条件，然后filter 函数中的元素将与null 进行比较，因此您的数组将为[]（空的）。要解决此问题，请与term == null（因此它将捕获 null 和未定义）而不是 term === undefined 进行比较。另外，考虑使用箭头函数：return productList.filter(Product => Product.prdName.toLowerCase().includes(term.toLowerCase()))。另外，如果我是你
非常感谢，它帮助了 :D

标签： html angular pipe angular2-custom-pipes

【解决方案1】：

在您的组件中如何初始化术语变量？

因为它可能不是 undefined 但它是 null 或空 ('')，在初始条件下尝试与 null、undefined 和 '' 进行比较。

【讨论】：

【解决方案2】：

我猜你需要添加一个检查项是否为空。您可以按如下方式实现您的管道，

export class MyFilterPipe implements PipeTransform {

    transform(items: any[], term: any[]): any {
      if (!term) 
        return items;
      return items.filter(item => item.productName.indexOf(term) > -1);
    }
}

DEMO

【讨论】：