在 Angular 中做一个动态过滤器

Question

我有一个可以跨组件重复使用的管道。通常在搜索时。

HTML 看起来像这样，你可以看到我有一个包含“plantNumber”和“shortDescription”的数组，但它可能是一个无穷无尽的属性列表

*ngFor="let workOrder of workOrders | filterArrayPipe: ['plantNumber', 'shortDescription']: searchFilter"

过滤器看起来像这样

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

@Pipe({
  name: 'filterArrayPipe'
})
export class FilterArrayPipe implements PipeTransform {
  transform(value: any, config: any, q: string) {
    if (config && q) {
      return value.filter(result => {
        return result[config[0]].toString().toLowerCase().indexOf(q) > -1 
          || result[config[1]].toString().toLowerCase().indexOf(q) > -1;
      });
    } else {
      return value;
    }
  }
}

但我希望它看起来更像这样

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

@Pipe({
  name: 'filterArrayPipe'
})
export class FilterArrayPipe implements PipeTransform {
  transform(value: any, config: any, q: string) {
    if (config && q) {
      return value.filter(result => {
        for (let i = 0; i < config.length; i ++) {
          const type = config[i];
          return result[type].toString().toLowerCase().indexOf(q) > -1;
        }
      });
    } else {
      return value;
    }
  }
}

所以问题是，我将如何添加“和”||在返回语句中？

Answer 1

由于 for 循环中的返回，它只会检查第一个 config 项目。

相反，您可以执行以下操作：

  return value.filter(result => {
    for (let i = 0; i < config.length; i ++) {
      const type = config[i];
      if (result[type].toString().toLowerCase().indexOf(q) > -1) {
        return true;
      }
    }
    return false;
  });

这样，它将尝试config数组中的每个值，如果没有找到匹配项，则只返回false。

或者，使用some 函数，您可以执行以下操作：

  return value.filter(result => {
    return config.some((type) => result[type].toString().toLowerCase().indexOf(q) > -1)
  });