html - 角度，过滤器管道返回空数据/假

Question

我正在尝试从此链接遵循自定义过滤器管道教程，但是当我在浏览器上运行我的项目时，表变为空。我不确定我必须做些什么来纠正这个问题。我已经使用了对 app.component.ts 的导入import { FilterPipe } from './filter.pipe';和在 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"表格数据显示的部分时，但当我把它放回表格数据时，什么也不显示。有人可以帮我解决这个问题吗？对不起，我的英语不好。

Answer 1

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

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

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

演示