Angular 7 中的动态搜索过滤器答案

【问题标题】：Dynamic Search Filter in Angular 7Angular 7 中的动态搜索过滤器
【发布时间】：2019-03-26 06:49:43
【问题描述】：

我想在 Angular 7 中编写一个通用过滤器，以对任意数量屏幕中的任意字段执行搜索过滤操作。我发现一些链接建议编写自定义管道过滤器，但它们总是根据特定的静态字段进行过滤。

为了解释更多，我的项目中有大约 20 个屏幕。每个屏幕都在进行 API 调用，获取数据并在 UI 上显示，就像设备屏幕显示字段数据一样：

deviceId, deviceHardwareNumber, deviceSoftwareNumber, deviceVendor, devicePurchaseDate

deviceServiceDetails 的另一个屏幕

deviceId, deviceServiceProvider, deviceServiceDate, nextServiceDueDate

现在我可以为 20 个屏幕编写 20 个过滤器以过滤不同的字段名称，或者有什么方法可以只为所有屏幕编写一个过滤器并过滤任何字段。

有没有办法通过编写一个过滤器来使其动态化，而不考虑屏幕的数量，即从任何屏幕传递的任何列表或 searchText 都应该被过滤并返回？

【问题讨论】：

你能提供更多细节吗？您要过滤的数据列表是什么？
编辑问题以添加更多详细信息
哦，好吧，这有点像过滤对象数组，但使用动态过滤？
是的，我想使用 ngFor 过滤显示在 UI 上的对象数组，但使用动态过滤
所以你想做Angular官方文档建议不要做的事情？ angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

标签： angular angular7

【解决方案1】：

很难创建一个过滤器来处理每种情况，但我做了一些处理字符串值的事情，并且在这种情况下我可以选择输入属性名称，我设法在许多屏幕中使用这个过滤器，但你可以看看是否你想处理另一种类型，在这种情况下你可能需要创建一个新的过滤器

如果过滤一个字符串属性，支持不同的方法，比如 include ， equal 和 not equal

字符串过滤管道

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

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

  transform(arr: any[], prop: string, value: string , method:Method): any {
    if (arr) {
      if (!value) {
        return arr
      } else {
        return arr.filter(obj => this.filter(obj[prop],value, method))
      }
    } else {
      return []
    }
  }

  filter(source :string, target :string, method:Method) : boolean {

    switch(method) {
      case "includes" : return source.includes(target)
      case "equal"  : return source === target
      case "not-equal" : return source !== target
    }
  }
}

type Method ="includes" | "equal" | "not-equal"

模板

<p>
Include <br>
 <input type="text" placeholder="search..." [(ngModel)]="searchValue">
</p>

<div *ngFor="let skill of skills | filter :'name' : searchValue: 'includes' ">
  {{skill.name}}
</div> 


<p>
Equal <br>
 <input type="text" placeholder="search..." [(ngModel)]="searchValue02">
</p>

<div *ngFor="let skill of skills | filter :'name' : searchValue02 : 'equal'">
  {{skill.name}}
</div>

Demo ??

【讨论】：

感谢您的回答。但是问题已经解决了，因为我在上面的 cmets 中进行了更新。
@Tarun 两个答案都可以为你工作，但在我的答案中你可以选择你想要的属性和方法，很乐意帮助?

【解决方案2】：

您也可以使用 Regex 代替 includes() 来获得不区分大小写的过滤器结果。

case "includes" : return source.includes(target); Case Sensitive

case "includes" : return new RegExp(target, "i").test(source); Case Insensitive

希望对你有帮助！

【讨论】：