角键值管道排序属性/按顺序迭代 [英] angular keyvalue pipe sort properties / iterate in order

问题描述

使用Angular 键值管道迭代对象的属性时，如下所示:

When using the Angular keyvalue pipe to iterate over an object's properties as follows:

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

我遇到了一个问题，即属性没有按预期的顺序进行迭代.此评论表明我不是唯一遇到此问题的人:

I have experienced an issue where the properties were not iterated in the order expected. And this comment suggests that I am not the only one to experience this issue:

如何在Angular中使用ngFor遍历对象属性

请问有人可以在使用键值管道时建议由什么决定迭代顺序，以及如何强制执行特定的迭代顺序?我理想的迭代顺序是添加属性的顺序.

Can someone advise what determines the order of iteration when using the keyvalue pipe please and how to force a specific iteration order? My ideal order of iteration is the order in which the properties were added.

谢谢

推荐答案

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

According to the Angular documentation, the keyvalue pipe sorts the items by key order by default. You can provide a comparer function to change that order, and sort the items according to the key, to the value, or to the entry order of the properties in the object.

以下比较器功能按各种顺序对项目进行排序:

The following comparer functions sort the items in various orders:

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

有关演示，请参见此stackblitz .

使用常量或null代替有效的比较器功能可以保留对象属性的输入顺序，就像originalOrder一样，但是会导致异常(请参见

Supplying a constant or null instead of a valid comparer function preserves the entry order of the object properties, like originalOrder does, but it causes an exception (see this stackblitz):

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

此外，在模板中两次使用该语法根本不会显示项目.因此，我不建议这样做.请注意，提供undefined作为比较器功能不会引起任何异常，但不会更改默认行为:这些项目按key值排序.

Moreover, using that syntax twice in the template does not display the items at all. Therefore, I would not recommend it. Please note that supplying undefined as the comparer function does not cause any exception but does not change the default behavior: the items are sorted by key value.

这篇关于角键值管道排序属性/按顺序迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！