Question

我正在尝试遵循此link中的自定义过滤器管道教程，但是当我在浏览器上运行我的项目时，表格变空。我不知道我要做些什么来纠正这个问题。我已经在module.ts中使用了导入import { FilterPipe } from './filter.pipe';到app.component.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);
    }
}

<强> DEMO

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

2 个答案: