Angular 使用角度过滤器的自定义过滤器

我有一个需要自定义过滤器的文本字段列表

假设当用户使用特定的字符串/字符进行搜索时，应用程序必须在表视图中仅显示该记录。

您可以使用。

---

它使表格过滤变得更容易，用户界面代码的复杂性更低

您可以编写一个角度管道来转换列表

例如：

生成管道过滤器

下面列出网格中的列表

使用管道自定义过滤器后

这可以通过在angular中使用自定义过滤器来实现，首先我们使用ng g pipe filterName创建一个管道，导航到u生成的管道组件并使用转换方法，下面是我使用的转换方法

transform(items: any, a: string, b: string, c: string){
if (items && items.length){
    return items.filter(item =>{
        if (a&& item.name.toLowerCase().indexOf(a.toLowerCase()) === -1){
            return false;
        }
        if (b && item.industry.toLowerCase().indexOf(b.toLowerCase()) === -1){
            return false;
        }
        if (c&& item.location.toLowerCase().indexOf(c.toLowerCase()) === -1){
            return false;
        }
        return true;
   })
}
else{
    return items;
}

} 然后导航到要使用自定义过滤器的特定html

<input type="text" [(ngModel)]="a">
<input type="text" [(ngModel)]="b">
<input type="text" [(ngModel)]="c">
<div *ngFor="let item of data | customFilter :a:b:c">
  {{item.{{item.city}}}}
</div>

---

你能展示一下你迄今为止所做的努力吗那么搜索应该在本地进行吗？i、 e您的所有表格数据都是一次性加载的吗？

transform(items: any, a: string, b: string, c: string){
if (items && items.length){
    return items.filter(item =>{
        if (a&& item.name.toLowerCase().indexOf(a.toLowerCase()) === -1){
            return false;
        }
        if (b && item.industry.toLowerCase().indexOf(b.toLowerCase()) === -1){
            return false;
        }
        if (c&& item.location.toLowerCase().indexOf(c.toLowerCase()) === -1){
            return false;
        }
        return true;
   })
}
else{
    return items;
}

<input type="text" [(ngModel)]="a">
<input type="text" [(ngModel)]="b">
<input type="text" [(ngModel)]="c">
<div *ngFor="let item of data | customFilter :a:b:c">
  {{item.{{item.city}}}}
</div>