时间戳

首页 > 解决方案 > 角度键值管道排序属性/按顺序迭代

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

问题描述

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

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

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

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

有人可以建议在使用键值管道时确定迭代顺序的因素以及如何强制特定的迭代顺序吗？我理想的迭代顺序是添加属性的顺序。

谢谢

标签： angulartypescriptangular-pipe

解决方案

根据 Angular文档，keyvalue管道key默认按顺序对项目进行排序。您可以提供一个比较器函数来更改该顺序，并根据对象中属性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>

请参阅此 stackblitz以获取演示。

提供一个常量或null代替有效的比较器函数可以保留对象属性的输入顺序，就像这样originalOrder做一样，但它会导致异常（请参阅此 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值排序。

推荐阅读