Angularを使用する場合キー値パイプを使用して、次のようにオブジェクトのプロパティを反復処理します。
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
プロパティが期待どおりの順序で反復されないという問題が発生しました。このコメントは、この問題を経験しているのは私だけではないことを示唆しています。
Angular で ngFor を使用してオブジェクトのプロパティをループする方法
keyvalue パイプを使用するときに反復の順序を決定するもの、および特定の反復順序を強制する方法を教えていただけますか? 理想的な反復順序は、プロパティが追加された順序です。
ありがとう
ベストアンサー1
Angularによるとドキュメンテーション、keyvalueパイプはデフォルトで項目を の順序で並べ替えます。その順序を変更する比較関数を提供して、項目を 、、またはオブジェクト内のプロパティのエントリ順序keyに従って並べ替えることができます。keyvalue
次の比較関数は、項目をさまざまな順序で並べ替えます。
// 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値によって並べ替えられます。