Angular，Filter管道返回空数据/ false

Question

我正在尝试通过此链接遵循自定义过滤器管道教程，但是当我在浏览器中运行项目时，表将变为空。 我不确定该如何纠正。 我已经import { FilterPipe } from './filter.pipe';使用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" | 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);
    }
}

演示