angular


Angular2 terrible performance with ngFor assigning variable to “index”


Consider the following 2d array:
myLabels = [[45, 56, 63],
[31, 67, 27],
[89, 23, 61]]
Now in a template, iterate over this array like:
<template ngFor let-row_ [ngForOf]=myLabels let-i="index">
<template ngFor let-labelid [ngForOf]=row_ let-j="index">
...
</template>
</template>
When I increase my array to something larger, the performance tanks pretty hard. A modestly-sized 40x40 array takes almost 40 seconds to render with Chromium 50. It's a little faster on Firefox 47, but not by much.
If I eliminate the index assignments (let-i="index"...), then the performance is just fine
<template ngFor let-row_ [ngForOf]=myLabels>
<template ngFor let-labelid [ngForOf]=row_>
...
</template>
</template>
So, the question is, what can be done to mitigate this issue? Is there something that I'm missing regarding ngFor? Is there a different way?
Did you try to change your change detection strategy to: ChangeDetectionStrategy.OnPush ?
Also, consider creating Immutable arrays.(See immutable.js)
Check this article: http://jvandemo.com/how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insanely-fast/

Related Links

Handle multiple service calls to bind to a list in Angular2
access key value of object
Setting class on ion-item when using *ngFor
TS2304: Cannot find name 'describe' in Webpack / Angular 2
Selectors name when naming directives
How to Authenticate Angular 2 with Firebase API using Auth0
Include user_metadata and app_metadata in JWT using Auth0
Primeng component calendar have a method for close the pop up calendar manually?
Angular test does not include import from node_modules
Convert Angular 4 web app to Angular Universal app
Generate a routing module while creating a module in angular-cli
What is the best practice to manage sessions with Ionic 2
Angular 2 Updating Component After Form Submit With New Data From Response
How to configure and use Auth-0 in Angular4
How to get meta tags work correctly in angular 2? [closed]
Angular2-highcharts switching option

Categories

HOME
inno-setup
encryption
monitoring
appium
fiware
get
maven-lifecycle
amazon-redshift
etcd
cordova-plugins
outlook-addin
jaxb
android-gradle
glusterfs
url-rewriting
spring-transactions
flannel
astyle
jxmaps
twitter-typeahead
subplot
cloudify
coap
ssis-2008
frama-c
oracle-data-integrator
week-number
street-address
package-name
nestedscrollview
javapoet
android-auto
falcor
clisp
exports-loader
equation-solving
dnspython
knockout-validation
icingaweb2
rtai
date-formatting
google-chartwrapper
syncsort-dmx-h
smf
idfa
groovy-eclipse
user-mode-linux
mongoose-web-server
divider
pdl
steroids
ssas-2008
euclidean-distance
glut
html5-template
savefiledialog
ncbi
build-system
slab
google-plugin-eclipse
function-prototypes
tokumx
apache-tomee
subsonic2.2
tankauth
casbah
datacontext
psychology
groff
google-playground
yepnope
fluent-security
inference
scite
fubumvc
tandem
perl-critic
amber-smalltalk
circusd
pmp
mercurial-subrepos
customer-support
nexus-7
viewstack
system-design
launching-application
python-sockets
endl
vtl
blat

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App