39
rated 0 times
[
40]
[
1]
/ answers: 1 / hits: 21602
/ 8 Years ago, sun, march 27, 2016, 12:00:00
I can't seem to get angular2 view to be updated on an array.push function, called upon from a setInterval async operation.
the code is from this angular plunkr example of setInterval:
What i'm trying to do is as follows:
import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2'
@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
@View({template: `Number of ticks: {{numberOfTicks}}`})
class Cmp {
numberOfTicks = [];
constructor(private ref: ChangeDetectorRef) {
setInterval(() => {
this.numberOfTicks.push(3);
this.ref.markForCheck();
}, 1000);
}
}
@Component({
selector: 'app',
changeDetection: ChangeDetectionStrategy.OnPush
})
@View({
template: `
<cmp><cmp>
`,
directives: [Cmp]
})
class App {
}
bootstrap(App);<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<script src=https://code.angularjs.org/tools/traceur-runtime.js></script>
<script src=https://code.angularjs.org/tools/system.js></script>
<script src=https://code.angularjs.org/tools/typescript.js></script>
<script data-require=jasmine data-semver=2.2.1 src=http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js></script>
<script data-require=jasmine data-semver=2.2.1 src=http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js></script>
<script data-require=jasmine@* data-semver=2.2.1 src=http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js></script>
<script src=config.js></script>
<script src=https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>The above code will work properly if numberOfTicks is just a number, (as the plunker original example shows) but once I change it to an array and push data, it won't update.
I can't seem to understand why is that.
The following behaviour is similar to an issue I have when trying to update a graph in angular2 with new data points when using setInterval / setTimeout.
Thanks for the help.
More From » arrays
