Фильтр динамического поиска в Angular 7

Question

Я хочу написать общий фильтр на угловом 7 для выполнения операции фильтра поиска в любом поле на любом количестве экранов. Я нашел несколько ссылок, предлагающих написание пользовательских конвейерных фильтров, но они всегда фильтруются на основе определенного статического поля.

Чтобы объяснить больше, у меня есть около 20 экранов в моем проекте. Каждый экран выполняет вызов API, извлекает данные и отображает их в пользовательском интерфейсе, как, например, экран устройства, на котором отображаются данные для полей:

deviceId, deviceHardwareNumber, deviceSoftwareNumber, deviceVendor, devicePurchaseDate

Еще один экран для устройства ServiceDetails

deviceId, deviceServiceProvider, deviceServiceDate, nextServiceDueDate

Теперь я могу написать 20 фильтров для 20 экранов для фильтрации по разным именам полей или есть возможность написать только один фильтр для всех экранов и выполнить фильтрацию по любому полю.

Есть ли способ сделать его динамическим, написав один фильтр независимо от количества экранов, то есть любой список или searchText, переданный с любого экрана, должен быть отфильтрован и возвращен?

Answer 1

Трудно создать фильтр для обработки каждого сценария, но я сделал что-то для обработки строкового значения и с возможностью ввода имени свойства, в этом случае мне удается использовать этот фильтр на многих экранах, но вы можете увидеть,вы хотите обрабатывать другой тип, вам может потребоваться создать новый фильтр в этом случае

В случае фильтра свойство строки с поддержкой другого метода, такого как include, равно и не равно

труба фильтра струн

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> 

Демо ??