web-dev-qa-db-ja.com

Angular 2のオブジェクトのすべてのプロパティで文字列を検索します

Angular 2）のオブジェクトのすべてのプロパティで文字列を検索する方法。

検索ボックスのあるテーブルにレンダリングされた顧客の配列があります。ユーザーが値を入力した場合、入力した値に一致する顧客をプッシュするためにすべてのプロパティ値を検索します。

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オブジェクトのメソッドを作成してから、この連結値で用語を検索する必要がありますか？

angularangular-pipeangular2-filtering
10
J.Rem

Nullチェックを適用して.toString()を使用する必要があります。そうでない場合、値が数値になるとtoLowerCase()メソッドを使用できなくなり、エラーが発生します。

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

アイテムのキーをループして、それらのいずれかに文字列が含まれているかどうかを確認し、いずれかの数が一致する場合にtrueを返すことができます。

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