Ionic3 ngClass绑定样式需要点击才能触发吗？

Question

原本打算在Ionic3的<ion-content>中使用ionScroll事件改变<ion-header>的样式，但是事件出发了样式却没变。但是如果我在header上添加一个按钮，点击一下按钮样式就变了。

相关代码

HTML

<ion-header [ngClass]="{'transparent-header': transparentHeader}">
  <ion-navbar color="light">
    <ion-title></ion-title>
    <ion-buttons end>
      <button icon-button (click)="goToEdit()">编辑</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content (ionScroll)="scrollEvent($event)"></ion-content>

TypeScript

transparentHeader: boolean = true;

scrollEvent(ionContent) {
  let opacity = 1 - (150 - ionContent.scrollTop) / 150;
  this.transparentHeader =  opacity >= 1 ? false : true;
}

goToEdit() {
  console.log('Go to edit.')
}

原本期望页面向下滑动一定距离，header的transparent-header样式就会自动移除，但现在必须要向下滑动以后，点一下编辑按钮才能移除，而编辑按钮里面只有一句控制台输出的语句。

图片

没有向下滑动的效果如下图：

向下滑动但是样式没有改变的效果如下图：

点击按钮以后的效果如下图：

Answer 1

刚刚看官方文档，找到了解决办法。

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()