ionic2のscrollEventの後にテンプレート変数が更新されない

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) 
    }); 
    }