Angular 2 の子配列によるオブジェクトのリストのフィルタリング

mattc19

こんな感じのデータがあります

[
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
]

検索バーに入力してデータをフィルタリングし、関連するタグを検索できるようにしたいです。角度 1 にはこのための組み込みフィルター パイプがありましたが、角度 2 では削除されたようです。カスタム パイプを調べてきましたが、ループするネストされたループを使用することしか考えられません。次に、すべてのオブジェクトがタグをループします。これは私の考えが間違っているのでしょうか。これを行う簡単な方法、またはこれに対応する組み込み関数はありますか?

シュノーケリング

通常の JavaScript API を使用して、その動作を取得できます。

data = [
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
];

filterDataByTag(searchTerm: string) {

   // filter the data array, based on some condition
   return this.data.filter(item => {

      // only include an item in the filtered results
      // if that item's Tags property includes the searchTerm
      // includes is a built in array method in ES2016
      return item.Tags.includes(searchTerm);
   });  
}

この例ではdata、 のコーディングに苦労していますが、状況に合わせて調整できます。重要な点は、関数がdatasearchTerm に基づいてフィルターされたリストを返すことです。したがって、フィルターされたリストを更新するたびに(たとえば、検索フィールドの入力イベントで)このメソッドを呼び出すことができます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

パイプを使用したオブジェクトの配列に基づくオブジェクトのAngular2フィルタリング配列

分類Dev

Angular2のオブジェクトの配列のプロパティ値に基づいてフィルタリングする方法は?

分類Dev

パイプAngular2でオブジェクト配列をフィルタリングする

分類Dev

Angular2 RegExpを使用してパイプでオブジェクトの配列をフィルタリングしますか?

分類Dev

Angular2で配列をフィルタリングするためのベストプラクティス

分類Dev

Angular-オブジェクトの別の配列の値に基づいてオブジェクトの配列をフィルタリングします

分類Dev

Angular 2モデルバインディング(オブジェクトの配列)

分類Dev

値に基づくオブジェクトの2つの配列間のフィルタリング

分類Dev

Angular 2. Reactive Formsのコントロールにオブジェクトの配列を使用する方法

分類Dev

Javascript(UnderscoreJS)の2番目のオブジェクト配列に基づいてオブジェクト配列1をフィルタリングします

分類Dev

Angular2オブジェクトの配列内に配列オブジェクトを表示する方法

分類Dev

Angular2オブジェクト配列を別のオブジェクト配列に配置する方法

分類Dev

Angular 2(リアクティブフォーム)フォームコントロール内のすべての検証ルール(pattern、minlength、maxlengthなど)をエラーオブジェクトにリストするかどうか

分類Dev

Swiftのオブジェクトで2D配列をフィルタリングする

分類Dev

Swiftのオブジェクトで2D配列をフィルタリングする

分類Dev

2番目の配列の値に一致するオブジェクトの配列をフィルタリングします

分類Dev

2つのオブジェクト配列をフィルタリングして効率的に処理するにはどうすればよいですか?

分類Dev

オブジェクトの配列を宣言するAngular 2

分類Dev

オブジェクトの配列を宣言するAngular 2

分類Dev

オブジェクトの配列を宣言するAngular 2

分類Dev

オブジェクト内の要素が異なるオブジェクトの2つの配列を比較して、配列をフィルタリングするにはどうすればよいですか?

分類Dev

Ionic 2 / Angular2配列内のオブジェクトからデータをフェッチする

分類Dev

式と2番目のオブジェクトによるIQueryable <T>の条件付きフィルタリング

分類Dev

Angularの別のオブジェクトの属性に基づいてオブジェクトの配列をフィルタリングするにはどうすればよいですか?

分類Dev

ネストされたforループを回避するオブジェクトの2つの配列間でフィルタリング

分類Dev

Typescriptはオブジェクトの2つの配列をフィルタリングします

分類Dev

オブジェクトの2つの配列をフィルタリングします

分類Dev

オブジェクトの配列、オブジェクトの配列を定義する方法| Angular 2

分類Dev

オブジェクトの2つの配列は、他のキーに基づいて1つをフィルタリングする必要があります

Related 関連記事

  1. 1

    パイプを使用したオブジェクトの配列に基づくオブジェクトのAngular2フィルタリング配列

  2. 2

    Angular2のオブジェクトの配列のプロパティ値に基づいてフィルタリングする方法は?

  3. 3

    パイプAngular2でオブジェクト配列をフィルタリングする

  4. 4

    Angular2 RegExpを使用してパイプでオブジェクトの配列をフィルタリングしますか?

  5. 5

    Angular2で配列をフィルタリングするためのベストプラクティス

  6. 6

    Angular-オブジェクトの別の配列の値に基づいてオブジェクトの配列をフィルタリングします

  7. 7

    Angular 2モデルバインディング(オブジェクトの配列)

  8. 8

    値に基づくオブジェクトの2つの配列間のフィルタリング

  9. 9

    Angular 2. Reactive Formsのコントロールにオブジェクトの配列を使用する方法

  10. 10

    Javascript(UnderscoreJS)の2番目のオブジェクト配列に基づいてオブジェクト配列1をフィルタリングします

  11. 11

    Angular2オブジェクトの配列内に配列オブジェクトを表示する方法

  12. 12

    Angular2オブジェクト配列を別のオブジェクト配列に配置する方法

  13. 13

    Angular 2(リアクティブフォーム)フォームコントロール内のすべての検証ルール(pattern、minlength、maxlengthなど)をエラーオブジェクトにリストするかどうか

  14. 14

    Swiftのオブジェクトで2D配列をフィルタリングする

  15. 15

    Swiftのオブジェクトで2D配列をフィルタリングする

  16. 16

    2番目の配列の値に一致するオブジェクトの配列をフィルタリングします

  17. 17

    2つのオブジェクト配列をフィルタリングして効率的に処理するにはどうすればよいですか?

  18. 18

    オブジェクトの配列を宣言するAngular 2

  19. 19

    オブジェクトの配列を宣言するAngular 2

  20. 20

    オブジェクトの配列を宣言するAngular 2

  21. 21

    オブジェクト内の要素が異なるオブジェクトの2つの配列を比較して、配列をフィルタリングするにはどうすればよいですか?

  22. 22

    Ionic 2 / Angular2配列内のオブジェクトからデータをフェッチする

  23. 23

    式と2番目のオブジェクトによるIQueryable <T>の条件付きフィルタリング

  24. 24

    Angularの別のオブジェクトの属性に基づいてオブジェクトの配列をフィルタリングするにはどうすればよいですか?

  25. 25

    ネストされたforループを回避するオブジェクトの2つの配列間でフィルタリング

  26. 26

    Typescriptはオブジェクトの2つの配列をフィルタリングします

  27. 27

    オブジェクトの2つの配列をフィルタリングします

  28. 28

    オブジェクトの配列、オブジェクトの配列を定義する方法| Angular 2

  29. 29

    オブジェクトの2つの配列は、他のキーに基づいて1つをフィルタリングする必要があります

ホットタグ

アーカイブ