angular - Angular2 ngFor does not see updated data within directive callback function -


i have read various ideas of how make angular 2 detection system update dom, , can not seem working. essentially, want make infinite scroller, , callback function declared within view called @ appropriate time directive. eg, if distance bottom of page less 50 px, call callback, update data.

http://plnkr.co/edit/hfcuqcyhprvn1xxcuknt?p=preview

so looks this:

@component... template: '<div *ngfor="#item in items" infinity-scroller [scrollercallback]="scrollcallback">{{item}}</div>'  constructor () {   this.items = getmockdata(0, 40)   this.onscrollcallback = this.onscrollcallback.bind(this) }  adddata () {   this.items.push(...getmockdata(410, 500)) }  onscrollcallback (ctx) {   this.items = this.items.concat(getmockdata(50, 100)) }  @directive selector: '[infinity-scroller]' inputs: ['scrollercallback']  class infinityscroller   ngoninit () {    window.onscroll = () => onscroll(this) }  function onscroll (ctx) {    ... logic call callback function (ie, ctx.scrollercallback()) } 

i added adddata method test adding data view, , function works perfectly. click button, , adddata pushes new items array , view updates.

however, when callback in directive makes call inputed "scrollcallback" function, updating data not reflected in dom.

any idea why be? in advance!

angular change detection doesn't recognize change detection on arrays or objects when content changes not array or object itself.

this.items.push(...getmockdata(410, 500)) this.items = this.items.slice(); // add line make angular recognize change. 

if bind property of item angular recognizes changes well.


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -