ionic 2 3，为什么滚动后变量的值没有改变？

Question

我写了这段代码，用于在滚动超过 500px 后显示按钮，但“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”第一次获取值“false”，但是当值更改为“true”时它不能听变化，我该如何解决这个问题？

Answer 1

根据 ionic 文档，滚动事件 滚动事件发生在 Angular 的区域。这是出于性能原因。所以如果你正在尝试 要将值绑定到任何滚动事件，需要将其包装在 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;
      }
    }

或

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