Angular 2: ngFor with map, use pipe or rx?

Question

I have a scenario where the server returns object maps rather than arrays. I need to display the data in an *ngFor.

I have read excellent threads on this such as this one which seem to favour using a pipe. I have also read that pipes are pure by default and only get called if there is a change to a primitive or reference, but for performance that still concerns me.

Which would be more performant? Using an angular pipe, or converting the data into an array at the rxjs stream level before even sending the data to the template?

score 3 · Accepted Answer · answered Feb 24 '17 at 18:33

3

Even though your question is mainly opinion based, you better just fix it from the source if you can, instead of using pipes. If the closest to the source you can get is the call to the server, I suggest you change it there using rxjs, with something like this (untested):

this.http.get(url)
    .map(response => response.json())
    .map(data => Object.keys(data).map(key => data [key]);
});

answered Feb 24 '17 at 18:33

Poul Kruijt

69,713
12
145
149

1

If he wants keys and values, consider `Object.entries(data).map(([key, value]) => ({ [key]: value}))` – Aluan Haddad Feb 27 '17 at 09:45
@AluanHaddad that's a nice addition indeed – Poul Kruijt Feb 27 '17 at 09:46
Thank you. It does require a polyfill to support older Browsers and NodeJS runtimes. This is part of core-js and you can also find standalone, individually packaged one like this by mozzila https://github.com/es-shims/Object.entries. – Aluan Haddad Feb 27 '17 at 09:49

Angular 2: ngFor with map, use pipe or rx?

1 Answers1