Ionic framework 为什么在滚动之后，变量的值不'；你不会变吗？

我写了这段代码，用于在滚动超过500px后显示按钮，但“showButton”并没有得到新值

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

此console.log显示“showButton”的更改，但在html中它不会更改

“showButton”首次获取值“false”，但当值更改为“true”时，它无法侦听更改，如何解决此问题？

//方法1）使用布尔变量
//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;
      }
    }

滚动顶部
showButton:boolean=false；
onScroll（$事件）{
如果（$event.scrollTop>500）{
console.log（这个.showButton）；
this.showButton=true；
}
}

或

//方法2）使用数字变量
滚动顶部
显示按钮：数字=0；
onScroll（$事件）{
如果（$event.scrollTop>500）{
console.log（这个.showButton）；
这个.showButton=1；
}
}

在ionic文档中，滚动事件滚动事件发生在 角区。这是出于性能原因。所以如果你想 要将值绑定到任何滚动事件，需要将其包装在 zone.run（）

滚动顶部
//在.ts文件中添加导入
从“@angular/core”导入{Component，NgZone}；
//在构造函数中
建造师(
公共区域：NgZone，
showButton=false；
onScroll（$事件）{
此.zone.run（（）=>{
如果（$event.scrollTop>500）{
console.log（这个.showButton）；
this.showButton=true；
}
})
}

在这里查看我的示例：谢谢@JGFMK，但我没有找到解决方案。滚动顶部尝试此操作我认为showbutton不是布尔类型，请尝试使用数字，showbutton:number=0；在滚动函数中尝试此操作。showbutton=1；如果删除ngIf，您的按钮是否第一次显示？“showbutton”获取值“false”，但当值更改为“true”时它听不到变化，我怎么能解决这个问题？

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

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