角键值管道排序属性/按顺序迭代

Question

当使用Angular keyvalue管道遍历对象的属性时，如下所示：

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

我遇到过一个问题，即属性没有按照预期的顺序迭代。这条评论表明，我不是唯一一个经历过这个问题的人：

如何在Angular中使用ngFor循环对象属性

Answer 1

根据Angular文档，keyvalue管道默认情况下按key顺序对项进行排序。您可以提供比较器函数来更改该顺序，并根据键、值或对象中属性的输入顺序对项进行排序。

以下比较器函数按不同的顺序对项进行排序：

// 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>

<!-- 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