Question

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

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

deviceId, deviceHardwareNumber, deviceSoftwareNumber, deviceVendor, devicePurchaseDate

另一个关于deviceServiceDetails的屏幕

deviceId, deviceServiceProvider, deviceServiceDate, nextServiceDueDate

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

是否有一种方法可以通过编写一个过滤器来实现动态化，而与屏幕的数量无关，也就是说，应该过滤并返回从任何屏幕传递来的任何列表或searchText？

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">
  {{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

Answer 2

您还可以使用Regex代替include（）获得不区分大小写的过滤器结果。

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

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

希望有帮助！

Angular 7中的动态搜索过滤器

2 个答案: