Search code examples
arraysangularngfor

Angular shows wrong ordered sequence

I have a array. this list is in order of array[1]. I want to show the list in the current order in Angular.

[[1,8],[7,6],[80,4],[3,4],[12,3],[5,2]]

But Angular breaking the order

1,8
80,4
7,6
5,2
3,4
12,3

My code

<div>
<table>
   <li *ngFor="let item of variablesthree | keyvalue">
       {{item.value[0]}}:{{item.value[1]}}
</table>
</div>

Also, when I examine the page source, I can see that the index comes in order.

Solution

  • It seemes the order outputs comes because of the pipe you are using. In this https://angular.io/api/common/KeyValuePipe you can see the output is sorted by the key of the elements, so you can remove the pipe or using a custom one to mantain the order.