Question

我有一个Ionic2应用程序。我正在使用 addScrollListener 事件来更新某个变量，并希望在页面视图中反映该更改。

scrolledDistance:number = 0;
@ViewChild(Content) contentNew: Content;

ngAfterViewInit() {
   this.contentNew.addScrollListener(this.onPageScroll)
}

onPageScroll(event) {
        setTimeout(() => {
          this.scrolledDistance = event.target.scrollTop;    
          this.shouldShowFab = false;
          console.log("scrolld:::",this.scrolledDistance);
        }, 10)
}

我的页面是

<ion-item>
  {{scrolledDistance}}
</ion-item>

scrolledDistance 变量在控制台中发生变化，但未反映在模板中。

Answer 1

您的代码中的问题是，在onPageScroll(..)方法中，this关键字不再是组件，而是window对象（这就是为什么this.scrolledDistance不是组件上的属性，但只是window.scrolledDistance）等新属性。

请查看this plunker以查看解决方案。在那里，您可以看到，为了避免这种情况发生，您可以像这样声明addScrollListener的回调：

this.contentNew.addScrollListener((event) => 
  { 
    // here the this keyword refers to the component!! 
  });

所以在这种情况下，它看起来像：

  ngAfterViewInit() {
     this.contentNew.addScrollListener((event) => {
       setTimeout(() => {
          this.scrolledDistance = event.target.scrollTop;    
          this.shouldShowFab = false;
          console.log("scrolld:::",this.scrolledDistance);
        }, 10)
     });
  }

在ionic2中的scrollEvent之后，模板变量未更新

1 个答案: