我写了这段代码,用于在滚动超过 500 像素后显示按钮,但“showButton”没有获得新值。
<ion-content (ionScroll)="onScroll($event)">
<button *ngIf="showButton">Scroll Top</button>
</ion-content>
我的.ts 文件:
showButton= false;
onScroll($event) {
if ($event.scrollTop > 500) {
console.log(this.showButton);
this.showButton= true;
}
}
此 console.log 显示“showButton”的更改,但在 html 中它没有更改。
“showButton”第一次得到值“false”但是当值变为“true”时它无法监听变化,我该如何解决这个问题?
最佳答案
From the ionic docs, Scroll Events Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a 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;
}
})
}
关于ionic-framework - ionic 2 3、为什么滚动后变量的值没有变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45659899/