【 Angular 】KeyValueパイプを使用して値を並べ替える

マナビト

こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

AngularのKey-Valueパイプを使用して、渡される値の順番を並べ替えることができたのでまとめておきたいと思います。

Angularのパイプとは何かについては、前回記事にしてますので合わせてご覧下さい。

【Angular】パイプ一覧少し前、実務でAngularのパイプ構文を使用してテンプレートのデータを加工する機会があったので、備忘録的な意味をこめて記事に...

Key-Valueパイプとはオブジェクトまたはマップをキーと値のペアの配列に変換することができ、デフォルトでソートする機能を持っています。

angular.io

外部リンク

Angular

配列変換及び、値をソートして並べ替えるために、下記の通りHTMLテンプレートに記載します。オブジェクトをngForで反復処理させます。
ascOrderは昇順、desOrderは降順となります。

<div *ngFor="let item of items | keyvalue: sortOrder">
  {{item.key}} : {{item.value}}
</div>

<div *ngFor="let item of items | keyvalue: ascOrder">
  {{item.key}} : {{item.value}}
</div>

<div *ngFor="let item of items | keyvalue: descOrder">
  {{item.key}} : {{item.value}}
</div>

次にコンポーネントにソート機能を追記していきます。

sortOrder = (a: KeyValue<string>, b: KeyValue<number>): number | string => {
  return 0;
}

// オブジェクトの値を昇順に並べ替えます。
ascOrder = (a: KeyValue<string>, b: KeyValue<string>): string => {
  return a.value.localeCompare(b.value);
}

// オブジェクトの値を降順に並べ替えます。
descOrder = (a: KeyValue<string>, b: KeyValue<string>): string => {
  return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
}

ascOrderで使用しているlocaleCompareメゾットは参照する文字列（ここではa.value）が引数として与えられた値よりも前に来るか、後に来るかを示す数値を返してくれます。

以上となります。
ここまでお読みくださりありがとうございました。

■ 参考文献