使用 Angular 的自定义过滤器答案

【问题标题】：Custom filter using Angular使用 Angular 的自定义过滤器
【发布时间】：2019-12-08 13:54:32
【问题描述】：

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

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

【问题讨论】：

能否请您展示一些您迄今为止尝试过的努力...！ :)
那么搜索应该在本地进行吗？即你所有的表格数据都是一次性加载的？

标签： angular sorting filtering asp.net-mvc-custom-filter

【解决方案1】：

您可以使用mat-table-filter。它使表格过滤更容易，UI代码复杂度更低

【讨论】：

【解决方案2】：

您可以编写一个 Angular 管道 (https://angular.io/guide/pipes) 来转换您的列表。

例子：

ng generate pipe filter

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'filterPipe'
})
export class FilterPipe implements PipeTransform {

  transform(textFields: string[], searchWord: string): any {
    return textFields.filter(val => val.toLowerCase().includes(searchWord));
  }

}

<ul>
    <li *ngFor="let field of textFields | filterPipe : searchWord"></li>
</ul>

【讨论】：

【解决方案3】：

此处列出网格中的内容

使用管道后（自定义过滤器）

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

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>

【讨论】：