Don't sort the Map when using ngFor Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!How to iterate using ngFor loop Map containing key as string and values as map iterationInfinite loop with javascript (Angular NgFor and http request)ngFor with index as value in attributeAngular 2 - *ngFor : Is there a way to use an alternative end condition?*ngFor with two way binding in IONIC 2Parsing a nested JSON in ngFor when the keys are unknownANGULAR 2/4 : call function for each row in NgForDynamic style css font-size ngFor angular 4 ionic 3How to get a reference to the list in an ngfor with a pipe applied to itAngular *ngFor item changesionic storage ngFor
Central Vacuuming: Is it worth it, and how does it compare to normal vacuuming?
How does light 'choose' between wave and particle behaviour?
Question about debouncing - delay of state change
What do you call the main part of a joke?
Using audio cues to encourage good posture
Is there a kind of relay only consumes power when switching?
How often does castling occur in grandmaster games?
Selecting user stories during sprint planning
How does the math work when buying airline miles?
Is CEO the "profession" with the most psychopaths?
Is it possible for SQL statements to execute concurrently within a single session in SQL Server?
How much damage would a cupful of neutron star matter do to the Earth?
What would you call this weird metallic apparatus that allows you to lift people?
How could we fake a moon landing now?
Dating a Former Employee
What is the topology associated with the algebras for the ultrafilter monad?
Denied boarding although I have proper visa and documentation. To whom should I make a complaint?
Most bit efficient text communication method?
Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?
What initially awakened the Balrog?
ArcGIS Pro Python arcpy.CreatePersonalGDB_management
Why wasn't DOSKEY integrated with COMMAND.COM?
Is there hard evidence that the grant peer review system performs significantly better than random?
How fail-safe is nr as stop bytes?
Don't sort the Map when using ngFor
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How to iterate using ngFor loop Map containing key as string and values as map iterationInfinite loop with javascript (Angular NgFor and http request)ngFor with index as value in attributeAngular 2 - *ngFor : Is there a way to use an alternative end condition?*ngFor with two way binding in IONIC 2Parsing a nested JSON in ngFor when the keys are unknownANGULAR 2/4 : call function for each row in NgForDynamic style css font-size ngFor angular 4 ionic 3How to get a reference to the list in an ngfor with a pipe applied to itAngular *ngFor item changesionic storage ngFor
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am using ngFor to display a Map. To do so, I am using the keyvalue. It looks like this:
*ngFor="let upgrade of upgrades | keyvalue"
My Problem now is, that keyvalue sorts my Map. I don't want this and don't know how to stop the sorting.
I tried using sortOrder = (a): number => return (a); as compareFn; it worked, but I don't think that this is the corret way of doing it?
angular ionic-framework ionic4 edited Mar 8 at 22:09
georgeawg
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
add a comment |
I am using ngFor to display a Map. To do so, I am using the keyvalue. It looks like this:
*ngFor="let upgrade of upgrades | keyvalue"
My Problem now is, that keyvalue sorts my Map. I don't want this and don't know how to stop the sorting.
I tried using sortOrder = (a): number => return (a); as compareFn; it worked, but I don't think that this is the corret way of doing it?
angular ionic-framework ionic4 edited Mar 8 at 22:09
georgeawg
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
1
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17
add a comment |
I am using ngFor to display a Map. To do so, I am using the keyvalue. It looks like this:
*ngFor="let upgrade of upgrades | keyvalue"
My Problem now is, that keyvalue sorts my Map. I don't want this and don't know how to stop the sorting.
I tried using sortOrder = (a): number => return (a); as compareFn; it worked, but I don't think that this is the corret way of doing it?
angular ionic-framework ionic4 edited Mar 8 at 22:09
georgeawg
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
I am using ngFor to display a Map. To do so, I am using the keyvalue. It looks like this:
*ngFor="let upgrade of upgrades | keyvalue"
My Problem now is, that keyvalue sorts my Map. I don't want this and don't know how to stop the sorting.
I tried using sortOrder = (a): number => return (a); as compareFn; it worked, but I don't think that this is the corret way of doing it?
angular ionic-framework ionic4 angular ionic-framework ionic4 edited Mar 8 at 22:09
georgeawg
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
edited Mar 8 at 22:09
georgeawg
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
edited Mar 8 at 22:09
georgeawg
35k115470
edited Mar 8 at 22:09
georgeawg
35k115470
edited Mar 8 at 22:09
georgeawg
35k115470
35k115470
asked Mar 8 at 20:13
foo.doofoo.doo
15
asked Mar 8 at 20:13
foo.doofoo.doo
15
asked Mar 8 at 20:13
foo.doofoo.doo
15
15
1
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17
add a comment |
1
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17
1
1
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17
add a comment |
2 Answers
2
active
oldest
votes
since you are working with Map, If you do not want to sort the key
you can use
*ngFor="let key of upgrades.keys()"
or
*ngFor="let entry of upgrades.entries()"
if you still want to use keyvalue pipe, your way is the right way. although it's a little confusing.
Since compareFn return a number, your sortOrder function will probably understand as null or NaN. I prefer (a,b)=>1 to be more clear. But it does not matter, the sorting is still happening, and probably waste some CPU time.
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
add a comment |
Yes, the keyvalue pipe does sort by the keys. I suspect this was a requirement for ngClass and ngStyle, because this was mentioned in the source code comments.
You can't stop the sorting. I'd just create my own pipe.
@Pipe(name: 'entries', pure: true)
export class EntriesPipe implements PipeTransform
transform(value: May<any,any>)
return Array.from(value.entries());
I made the pipe pure, but that's up to you. It's difficult to work with Map<> types if it's pure.
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070393%2fdont-sort-the-map-when-using-ngfor%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
since you are working with Map, If you do not want to sort the key
you can use
*ngFor="let key of upgrades.keys()"
or
*ngFor="let entry of upgrades.entries()"
if you still want to use keyvalue pipe, your way is the right way. although it's a little confusing.
Since compareFn return a number, your sortOrder function will probably understand as null or NaN. I prefer (a,b)=>1 to be more clear. But it does not matter, the sorting is still happening, and probably waste some CPU time.
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
add a comment |
since you are working with Map, If you do not want to sort the key
you can use
*ngFor="let key of upgrades.keys()"
or
*ngFor="let entry of upgrades.entries()"
if you still want to use keyvalue pipe, your way is the right way. although it's a little confusing.
Since compareFn return a number, your sortOrder function will probably understand as null or NaN. I prefer (a,b)=>1 to be more clear. But it does not matter, the sorting is still happening, and probably waste some CPU time.
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
add a comment |
since you are working with Map, If you do not want to sort the key
you can use
*ngFor="let key of upgrades.keys()"
or
*ngFor="let entry of upgrades.entries()"
if you still want to use keyvalue pipe, your way is the right way. although it's a little confusing.
Since compareFn return a number, your sortOrder function will probably understand as null or NaN. I prefer (a,b)=>1 to be more clear. But it does not matter, the sorting is still happening, and probably waste some CPU time.
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
since you are working with Map, If you do not want to sort the key
you can use
*ngFor="let key of upgrades.keys()"
or
*ngFor="let entry of upgrades.entries()"
if you still want to use keyvalue pipe, your way is the right way. although it's a little confusing.
Since compareFn return a number, your sortOrder function will probably understand as null or NaN. I prefer (a,b)=>1 to be more clear. But it does not matter, the sorting is still happening, and probably waste some CPU time.
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
edited Mar 8 at 23:04
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
answered Mar 8 at 22:57
HaijinHaijin
1,2161619
1,2161619
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
add a comment |
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
I did actually see that attempt here: link. But, as mentioned there, this doesn't work.
– foo.doo
Mar 9 at 1:11
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
Surprised to see that does not work, but good to know. Thanks.
– Haijin
Mar 9 at 2:34
add a comment |
Yes, the keyvalue pipe does sort by the keys. I suspect this was a requirement for ngClass and ngStyle, because this was mentioned in the source code comments.
You can't stop the sorting. I'd just create my own pipe.
@Pipe(name: 'entries', pure: true)
export class EntriesPipe implements PipeTransform
transform(value: May<any,any>)
return Array.from(value.entries());
I made the pipe pure, but that's up to you. It's difficult to work with Map<> types if it's pure.
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
add a comment |
Yes, the keyvalue pipe does sort by the keys. I suspect this was a requirement for ngClass and ngStyle, because this was mentioned in the source code comments.
You can't stop the sorting. I'd just create my own pipe.
@Pipe(name: 'entries', pure: true)
export class EntriesPipe implements PipeTransform
transform(value: May<any,any>)
return Array.from(value.entries());
I made the pipe pure, but that's up to you. It's difficult to work with Map<> types if it's pure.
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
add a comment |
Yes, the keyvalue pipe does sort by the keys. I suspect this was a requirement for ngClass and ngStyle, because this was mentioned in the source code comments.
You can't stop the sorting. I'd just create my own pipe.
@Pipe(name: 'entries', pure: true)
export class EntriesPipe implements PipeTransform
transform(value: May<any,any>)
return Array.from(value.entries());
I made the pipe pure, but that's up to you. It's difficult to work with Map<> types if it's pure.
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
Yes, the keyvalue pipe does sort by the keys. I suspect this was a requirement for ngClass and ngStyle, because this was mentioned in the source code comments.
You can't stop the sorting. I'd just create my own pipe.
@Pipe(name: 'entries', pure: true)
export class EntriesPipe implements PipeTransform
transform(value: May<any,any>)
return Array.from(value.entries());
I made the pipe pure, but that's up to you. It's difficult to work with Map<> types if it's pure.
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
answered Mar 9 at 2:15
cgTagcgTag
24.7k865114
24.7k865114
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
add a comment |
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
Sidenote: although this will work, you will lose some of the optimizations that the keyvalue pipe has github.com/angular/angular/blob/7.2.8/packages/common/src/pipes/…
– Jota.Toledo
Mar 9 at 8:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070393%2fdont-sort-the-map-when-using-ngfor%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This might be sidetracking, but, what is wrong with actually sorting the info? Usually that makes it nicer for the end user's view :)
– Alejandro Vales
Mar 8 at 22:17