Angular 使用管道进行全文搜索

是否可以使用管道在对象数组上创建全文搜索

我首先实现对单个字段的搜索

导出类SearchPipe实现PipeTransform{
转换（值：任意）：任意{
返回值.filter（（item）=>item.company.startWith（'s'）；
}
}

但是得到以下错误

core.umd.js:3488 EXCEPTION: Uncaught (in promise): Error: Error in ./CustomerListComponent class CustomerListComponent - inline template:17:20 caused by: Cannot read property 'filter' of undefined
TypeError: Cannot read property 'filter' of undefined

更新

组成部分

导出类CustomerListComponent{
公众客户：任何；
建造师(
私人客户服务：客户服务）{
}
恩戈尼尼特（）{
this.customerService.getCustomers（）
.subscribe（数据=>this.customers=数据）
}
}

模板

{{customer.id}{{customer.company}}{。。。

模块

@NgModule({
导入：[BrowserModule，HttpModule，路由]，
声明：[AppComponent、CustomerListComponent、CustomerProfileComponent、SearchPipe]，
引导：[AppComponent]
})

它会给您带来错误，因为没有为

客户分配值

最初调用API时，结果可能为空

//组成部分

public customers:any[] = [];

//单索引搜索

export class SearchPipe implements PipeTransform {
  transform(value: any): any {
    return (typeof value !== 'undefined') ? value.filter((item) => item.company.startWith('s')) : true;
  }
}

//多索引搜索

export class SearchPipe implements PipeTransform {
  transform(value: any): any {
    return (typeof value !== 'undefined') ? value.filter((item) => {   
      return item.company.startWith('s') || item.company_name.startWith('s') || item.another_index.startWith('s');
    }) : true;
  }
}

---

分享你的component和html代码，展示你是如何使用pipe@ranakrunal9完成！这就足够了吗？看起来您尝试使用管道过滤的值在第一次渲染时尚未初始化，因为您正在通过服务异步获取它。您应该在其周围添加一个

if

子句，以便在

null

时不进行筛选。或者公开可观察对象，并使用

|async

在模板中异步解析。谢谢！如何扩展此示例以搜索孔对象上的字符串，而不仅仅是单个索引？我已更新了多索引的答案，您必须在

filter

函数中添加过滤条件。您可以从中引用以通过索引作为

管道

参数谢谢！这很有帮助。有没有其他方法不用手动列出每个键？我记得它在angular 1中起作用。使用以下语法：| filter:searchTerm