angular keyvalue pipe排序属性/按顺序迭代

Question

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

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

我遇到了一个问题,即属性没有按预期的顺序迭代.这条评论表明我并不是唯一一个遇到这个问题的人:

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

有人可以建议在使用keyvalue管道时决定迭代顺序的内容以及如何强制执行特定的迭代顺序吗？我理想的迭代顺序是添加属性的顺序.

谢谢

Answer 1

根据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.

Answer 2

是的，默认情况下键值对按升序对数据进行排序。

要保持未排序，请修改为：

keyvalue: 0

最终代码：

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

但是对于 angular 7 或更高版本，您需要放置一个空函数以保持数据未排序。

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

在您的.ts文件中只需放置这个空函数。

  unsorted() { }

希望它有帮助。

Answer 3

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

直接写入，您将获得与json中相同的数据

keyvalue: 0

Answer 4

这与已接受的答案相同，但是它具有更复杂的对象，因此可以帮助某人如何按自定义索引字段进行排序并使用keyval管道。

在角度分量中：

myObject = {
    "key1": { val:"whateverVal1", code:"whateverCode1", index: 1},
    "key2": { val:"whateverVal2", code:"whateverCode2", index: 0},
    "key3": { val:"whateverVal3", code:"whateverCode3", index: 2}
}

组件中的排序功能：

indexOrderAsc = (akv: KeyValue<string, any>, bkv: KeyValue<string, any>): number => {
        const a = akv.value.index;
        const b = bkv.value.index;

        return a > b ? 1 : (b > a ? -1 : 0);
    };

在模板中：

<div *ngFor="let x of myObject | keyvalue:indexOrderAsc">
    ...
</div>

Answer 5

为了保持对象顺序，您可以使用

keepOrder = (a, b) => {
    return a;
}

假设您有

wbs = {
"z": 123,
"y": 456,
"x": 789,
"w": 0#*
}

如果使用键值，则按键获取字母顺序

w 0#*
x 789
y 456
z 123

应用：keepOrder保持对象顺序

<ion-item *ngFor="let w of wbs | keyvalue: keepOrder">
    <ion-label>{{ w.key }}</ion-label>
    <ion-label>{{ w.value }}</ion-label>
</ion-item>

Answer 6

试试下面的一段代码：

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

Answer 7

我更喜欢keyvalue通过在我的管道中扩展它来覆盖默认行为。然后我使用我的管道而不是keyvalue我的模板。

import {Pipe} from '@angular/core';
import {KeyValuePipe} from '@angular/common';

const keepOrder = (a, b) => a;

// This pipe uses the angular keyvalue pipe but doesn't change order.
@Pipe({
  name: 'defaultOrderKeyvalue'
})
export class DefaultOrderKeyvaluePipe extends KeyValuePipe {

  public transform(value, compareFn = keepOrder) {
    return super.transform(value, compareFn);
  }

}