[解決済み] angular keyvalue pipe sort properties / iterate in order (アンギュラーキーバリューパイプソートプロパティ / イテレートオーダー)

質問

Angularの キーバリュー パイプを使用して、次のようにオブジェクトのプロパティを反復処理します。

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

私は、プロパティが期待された順序で反復されないという問題を経験しました。そして、このコメントは、この問題を経験するのは私一人ではないことを示唆しています。

AngularでngForを使用してオブジェクトのプロパティをループする方法

誰かが、キーバリューパイプを使用するときに反復の順序を決定するものと、特定の反復順序を強制する方法をアドバイスしてください？私の理想的な反復の順序は、プロパティが追加された順序です。

ありがとうございます。

どのように解決するのですか？

Angularによると ドキュメントによると には keyvalue パイプでソートされます。 key の順にソートします。この順序を変更するために comparer 関数を提供し、項目を key に、そして value に、あるいはオブジェクトのプロパティの入力順序に。

以下の比較器関数は様々な順序で項目を並べ替えます。

// Preserve original property order
originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
  return 0;
}

// Order by ascending property value
valueAscOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
  return a.value.localeCompare(b.value);
}

// Order by descending property key
keyDescOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
  return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
}

に適用すると keyvalue のパイプに適用されます。

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

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

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

参照 このスタックブリッツ をご覧ください。

定数を供給することや null を指定すると、オブジェクトのプロパティの入力順序が保持されます。 originalOrder のようにオブジェクトのプロパティの入力順を保持しますが、例外が発生します ( このスタックブリッツ ):

<!-- The following syntaxes preserve the original property order -->
<div *ngFor="let item of object | keyvalue: 0">
<div *ngFor="let item of object | keyvalue: 374">
<div *ngFor="let item of object | keyvalue: null">

<!-- but they cause an exception (visible in the console) -->
ERROR TypeError: The comparison function must be either a function or undefined

さらに、テンプレート内でその構文を2回使っても、項目は全く表示されません。したがって、私はそれをお勧めしません。なお undefined を指定しても例外は発生しませんが、デフォルトの動作は変更されないことに注意してください。 key 値でソートされます。