Disable the default keyvalue pipe sort in angular

Question

<tr *ngFor="let a of arrayOfObjects">
    <td *ngFor="let item of cfValues | keyvalue">
        {{item.value}}
    </td>
</tr>

I am just trying to print the items in the regular order but the key/value pipe does a default sorting based on the index. Is there a way to disable the default sorting?

Default sorting? IMK, it depends on the browsers on how they pull out the keys, JS objects are unordered. — Ashish Ranjan, Jan 08 '19 at 11:41

score 66 · Accepted Answer · edited Feb 18 '21 at 07:48

66

You need to return 0 if you want them to not be ordered. So in your cause you could either do <td *ngFor="let item of cfValues | keyvalue : 0">

But that would throw a ts error: TypeError: The comparison function must be either a function or undefined

Else, you can create a function that returns 0 and use

returnZero() {
    return 0
}

[... in your template]

<td *ngFor="let item of cfValues | keyvalue : returnZero">

edited Feb 18 '21 at 07:48

Aniket kale

609
7
23

answered Mar 29 '19 at 06:05

alberto montalesi

978
11
17

2

If you're using typescript, the function should be like: `returnZero() { return 0; } ` – Cristian Guedes Nov 26 '19 at 12:02

Disable the default keyvalue pipe sort in angular

1 Answers1