Check out this plunker
Please note: In order to see the effect, you need to restart the app after entering the link.
import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core'
@Component({
selector: 'sub',
template: `
<li *ngFor="#elem of sub_list">
<div>{{elem['name']}}</div>
</li>
`
})
export class Sub {
@Input()
sub_list: Object[];
ngOnInit(){
console.log('init');
console.log(this.sub_list);
}
ngOnChanges(){
console.log('change');
console.log(this.sub_list);
}
ngDoCheck() {
console.log('check');
console.log(this.sub_list);
}
}
@Component({
selector: 'my-app',
template: `
<div>
<sub
[sub_list]="my_list"
>
</sub>
</div>
`,
directives: [Sub]
})
export class App {
my_list: Object[] = [];
ngOnInit() {
var vm = this;
setTimeout(function() {
for(var i = 0; i < 100; i++) {
vm.my_list.push({
'index' : i,
'name' : i
});
}
}, 100);
}
}
When trying to display this.sub_list in the ngOnChange method of Sub, the browser shows an empty list.
However, the ngDoCheck method accurately captures the change.
What could be the reason for this behavior?