Angular 7 中的动态搜索过滤器

Question

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

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

deviceId, deviceHardwareNumber, deviceSoftwareNumber, deviceVendor, devicePurchaseDate

deviceServiceDetails 的另一个屏幕

deviceId, deviceServiceProvider, deviceServiceDate, nextServiceDueDate

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

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

Answer 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> 

演示🚀🚀

Answer 2

您还可以使用 Regex 而不是 includes() 来获取区分大小写的过滤器结果。

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

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

希望能帮助到你！