11

如何在 Angular 2 中使用 TS 在对象的所有属性中搜索字符串。

我在带有搜索框的表中呈现了一组客户,如果用户键入一个值,我想搜索所有属性值以推送与键入的值匹配的客户。

export var CUSTOMER: Client[] = [
  { id: 1, name: 'John', phone: '888-888-888'},
  { id: 2, name: 'Nick', phone: '555-888-888'},
  { id: 3, name: 'Mike', phone: '666-888-888'},
];

过滤管

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

@Pipe({
  name: 'filter',
  pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {

  transform(items: any, term: any): any {
    if (term === undefined) {
      return items;
    }

    return items.filter(function(item){
      return item.name.toLowerCase().includes(term.toLowerCase());
    });
  }
}

在上面的过滤器管道中,我只能按名称搜索。我不知道如何解决这个问题。我是否应该为 Customer 对象创建一个方法,该方法返回所有连接的属性值,然后在这个连接的值上搜索术语?

4

3 回答 3

11

您需要应用空检查并使用,.toString()否则如果值将是数字,它将无法使用toLowerCase()方法并会引发错误。

return items.filter(item =>
  Object.keys(item).some(
    k =>
      item[k] != null &&
      item[k]
        .toString()
        .toLowerCase()
        .includes(term.toLowerCase())
  )
);
于 2017-10-16T23:47:53.000 回答
7

您可以遍历项目的键并查看其中是否包含字符串,如果其中任意数量匹配则返回 true:

return items.filter(item =>
  Object.keys(item).some(k => item[k].includes(term.toLowerCase());
)
于 2017-01-27T19:42:54.597 回答
-1
`arrayObj = [
  {name: 'Maxim', age: 15},
  {name: 'Pasha', age: 35},
  {name: 'Lena', age: 25},
];

let filteredObj = arrayObj.filter((item: any) => {
  if (JSON.stringify(item).includes('Maxim')) {
    return item;
  }
});`

把它带到一个单一的寄存器中也不错。

于 2021-06-17T11:28:39.030 回答