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

问题描述

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

{{item.key}}:{{item.value}}

我遇到过属性未按预期顺序迭代的问题.此评论表明我不是唯一遇到此问题的人:

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

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

谢谢

解决方案

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

以下比较器函数以各种顺序对项目进行排序:

//保留原始属性顺序originalOrder = (a: KeyValue, b: KeyValue): number =>{返回0；}//按属性值升序排列valueAscOrder = (a: KeyValue, b: KeyValue): number =>{返回 a.value.localeCompare(b.value);}//按属性键降序排序keyDescOrder = (a: KeyValue, b: KeyValue): number =>{返回 a.key >b.钥匙?-1 : (b.key > a.key ? 1 : 0);}

当应用于 keyvalue 管道时:

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

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

有关演示，请参阅此 stackblitz.

---

提供常量或 null 而不是有效的比较器函数会保留对象属性的入口顺序，就像 originalOrder 一样，但会导致异常(请参阅 这个stackblitz):

<!-- 以下语法保留原始属性顺序--><div *ngFor="let item of object | keyvalue: 0"><div *ngFor="let item of object | keyvalue: 374"><div *ngFor="let item of object | keyvalue: null"><!-- 但它们会导致异常(在控制台中可见)-->错误类型错误:比较函数必须是函数或未定义

此外，在模板中两次使用该语法根本不会显示项目.因此，我不会推荐它.请注意，提供 undefined 作为比较器函数不会导致任何异常，但不会更改默认行为:项目按 key 值排序.

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:

How to loop over object properties with ngFor in Angular

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.

Thanks

解决方案

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);
}

when applied to the keyvalue pipe:

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

See this stackblitz for a demo.

---

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

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屋！