離子2 3，爲什麼滾動後，變量的值不變？

Question

我寫了顯示按鈕後，滾動超過500像素的代碼，但「showButton」沒有得到新的價值。

<ion-content (ionScroll)="onScroll($event)"> 
    <button *ngIf="showButton">Scroll Top</button> 
</ion-content> 

my.ts文件：

showButton= false; 

onScroll($event) {  
    if ($event.scrollTop > 500) { 
    console.log(this.showButton); 
    this.showButton= true; 
    } 
} 

此的console.log顯示 「showButton」 的變化，但在HTML它不會改變。

「showButton」爲第一時間內得到的「假」，但是當值更改爲「真」，它可以不聽變化，我怎麼能解決這個問題？

Answer 1

從離子文檔，滾動事件滾動事件 角的區域之外發生。這是出於性能原因。所以，如果你想 綁定一個值到任何滾動事件，它需要被包裝在一個 zone.run（）

<ion-content (ionScroll)="onScroll($event)"> 
     <button *ngIf="showButton">Scroll Top</button> 
</ion-content> 

    //add import in .ts file 

    import { Component, NgZone } from '@angular/core'; 


    //in constructor 

    constructor(
     public zone: NgZone, 



    showButton= false; 

    onScroll($event) { 
     this.zone.run(() => { 
      if ($event.scrollTop > 500) { 
      console.log(this.showButton); 
      this.showButton = true; 
      } 
     }) 
     } 

Answer 2

//Method 1) use boolean variable 

    <ion-content (ionScroll)="onScroll($event)"> 
     <button *ngIf="showButton">Scroll Top</button> 
    </ion-content> 

    showButton:boolean= false; 

    onScroll($event) {  
     if ($event.scrollTop > 500) { 
     console.log(this.showButton); 
     this.showButton= true; 
     } 
    } 

OR

//Method 2) use number variable 

    <ion-content (ionScroll)="onScroll($event)"> 
     <button *ngIf="showButton==1">Scroll Top</button> 
    </ion-content> 

    showButton:number= 0; 

    onScroll($event) {  
     if ($event.scrollTop > 500) { 
     console.log(this.showButton); 
     this.showButton= 1; 
     } 
    }