Angular 对象数据数组的角度过滤器

我有一个

ngFor

，它在一个对象数组上迭代。我在UI的表格中显示这些信息，一切正常

我正在尝试实现一个小的过滤框，以便根据输入框中的内容缩小结果范围

我使用了一个

管道

，让它处理一组数据，但我不知道如何在不指定特定键的情况下搜索对象。我希望能够输入

搜索词

，如果它是任何一个对象中的值，则对其进行过滤

管道：

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;

    return values.filter(v => v.indexOf(filter) >= 0);
  }
}

dataObj = [
  {
    name: 'Bob',
    age: 21,
    location: 'USA'
  },
  {
    name: 'Sally',
    age: 25,
    location: 'UK'
  }]

  filterString = '';

<div>
  <h2>Hello {{name}}</h2>
  <input [(ngModel)]="filterString" />
  <div *ngFor="let d of (dataObj | filter: filterString)">
    {{ d.name }} - {{ d.age }} - {{ d.location }}
  </div>
</div>

组件：

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;

    return values.filter(v => v.indexOf(filter) >= 0);
  }
}

dataObj = [
  {
    name: 'Bob',
    age: 21,
    location: 'USA'
  },
  {
    name: 'Sally',
    age: 25,
    location: 'UK'
  }]

  filterString = '';

<div>
  <h2>Hello {{name}}</h2>
  <input [(ngModel)]="filterString" />
  <div *ngFor="let d of (dataObj | filter: filterString)">
    {{ d.name }} - {{ d.age }} - {{ d.location }}
  </div>
</div>

HTML:

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;

    return values.filter(v => v.indexOf(filter) >= 0);
  }
}

dataObj = [
  {
    name: 'Bob',
    age: 21,
    location: 'USA'
  },
  {
    name: 'Sally',
    age: 25,
    location: 'UK'
  }]

  filterString = '';

<div>
  <h2>Hello {{name}}</h2>
  <input [(ngModel)]="filterString" />
  <div *ngFor="let d of (dataObj | filter: filterString)">
    {{ d.name }} - {{ d.age }} - {{ d.location }}
  </div>
</div>

你好{{name}
{{d.name}-{d.age}-{d.location}

预期结果：

如果我输入

21

或

Sally

或

US

，我希望看到结果。我试图避免将一个键硬编码到它搜索的管道中，因为我希望对象中的所有值都是可搜索的

---

这里是一个plnkr示例：

您可以通过

object.keys（o）

遍历所有对象键，并检查至少一个对象字段中是否存在匹配项

您还需要处理

v[k]

的类型，因为

indexOf

仅用于字符串（和数组），而不用于数字

像这样的东西应该可以完成这项工作：

public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;

    return values.filter(v => {
        let match = false;

        Object.keys(v).forEach(k => {
            if (typeof v[k] === 'string') {
                match = match || v[k].indexOf(filter) >= 0;
            } else {
                match = match || v[k] == filter; // == intentinally
            }
        });

        return match;
    });
}

---

这是您的plunker，用于此修复：

根据Angular文档，最推荐的方法是使用函数执行过滤器，并避免在*ngFor中使用管道。在此函数中，您可以使用所需的资源对对象集合执行筛选，如前所述

要识别与在筛选器字段中输入的文本匹配的项目，请使用搜索嵌套字段的组件，为此，我发布了我在npm中使用的组件（）

这样，您的代码可能如下所示：

对于此数据结构（可以使用复杂类型对象引用或接口）：

1-将管道组件注入施工人员使用的施工人员中 功能

2-创建一个函数，该函数将接收要执行的数据采集 过滤器。在该函数中，您可以定义要修改的属性 根据以下示例，用于过滤器：

请注意，“general.number\u invoice”属性是嵌套的，即在复杂类型中。wngx过滤器组件可以获取无限子级别（嵌套）中的数据

并在html中使用此函数，如下所示：

...

---

作为组件使用的完整演示，您可以访问和查看简单的代码。

这似乎可以正常工作，直到它将其缩小为一个结果，然后才显示任何内容。例如，如果我输入“U”，它会同时找到两个，但如果我输入“USA”，并且只有一个结果，它不会显示任何内容。我认为这是因为对数字也使用了

索引，请参见我编辑的答案。我还添加了plunker，看起来不错。谢谢，这看起来不错。因为它区分大小写，所以它把我甩了，所以它省略了一些东西。我将为此提供一些东西。如果您想要不区分大小写的搜索，只需在
filter
和
v[k]
属性上调用
str.toLowerCase（）
（同样，对于
v[k]
您只能在其字符串上执行此操作）。我在这里有一篇关于此的博客帖子：