【问题标题】:Search for a string in all properties of an object in Angular 2在Angular 2中对象的所有属性中搜索字符串
【发布时间】:2017-06-13 14:06:27
【问题描述】:

如何在 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 对象创建一个方法来返回所有连接的属性值,然后在这个连接的值上搜索术语?

【问题讨论】:

    标签: angular angular-pipe angular2-filtering


    【解决方案1】:

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

    return items.filter(item =>
      Object.keys(item).some(
        k =>
          item[k] != null &&
          item[k]
            .toString()
            .toLowerCase()
            .includes(term.toLowerCase())
      )
    );
    

    【讨论】:

      【解决方案2】:

      您可以遍历项目的键,看看它们中是否有任何包含字符串,如果有任何数量匹配,则返回 true:

      return items.filter(item =>
        Object.keys(item).some(k => item[k].includes(term.toLowerCase());
      )
      

      【讨论】:

      • 我喜欢这种方法,我通常会作弊,所以 JSON.serialize(object) 并对生成的字符串进行比较,但我更喜欢你的回答,谢谢分享!
      • 谢谢@cobolstinks!
      • @AliAdravi 如果 item[k] 不是字符串,则会发生这种情况。
      【解决方案3】:
      `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;
        }
      });`
      

      把它带到一个单一的登记处也不错。

      【讨论】:

      猜你喜欢
      • 2017-03-28
      • 2018-05-19
      • 1970-01-01
      • 2016-01-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多