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

从离子文档中，滚动事件滚动事件发生在外部 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;
      }
    }

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

离子2 3，为什么滚动后，变量值不变？

2 个答案: