Question

我已经阅读了有关如何使角度2检测系统更新DOM的各种想法，我似乎无法使其工作。本质上，我想创建一个无限卷轴，我想要一个在视图中声明的回调函数，在适当的时候由指令调用。例如，如果到页面底部的距离小于50像素，则调用回调，然后更新数据。

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

所以它看起来像这样：

@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 to call the callback function (ie, ctx.scrollerCallback())
}

我添加了addData方法来测试向视图添加数据，并且该功能完美运行。我单击一个按钮，addData将新项目推送到数组并更新视图。

然而，当指令中的回调调用了输入的＆＃34; scrollCallback＆＃34;功能，更新数据不会反映在DOM中。

知道为什么会这样吗？提前谢谢！

Answer 1

当只有内容发生变化而不是数组或对象本身时，角度变化检测不会识别数组或对象上的变化检测。

this.items.push(...getMockData(410, 500))
this.items = this.items.slice(); // add this line to make Angular recognize the change.

如果绑定到项目的属性，Angular也会识别这些更改。

Angular2 ngFor在指令回调函数中没有看到更新的数据

1 个答案: