Firebase侦听器未在Ionic 3视图中更新

Question

因此，我发现我认为可能是一个奇怪的错误。我正在尝试从Firebase检索数据并将其呈现到Ionic 3应用程序中的页面，但是除非单击页面中的其他元素，否则数据确实会显示。

以下是获取帖子的一些代码：

constructor(
    public navCtrl: NavController, public afDb: AngularFireDatabase,
    public auth: AngularFireAuth
  ) {
    if (this.auth.authState){
      this.auth.authState.subscribe(user => {
        this.user = user;
        this.postsRef = firebase.database().ref('users/app/' + this.user.uid + '/posts');
        this.postsRef.on('value', (snap) => {

            //snapshotToArray() turns firebase snapshot of objects into an array of objects and returns it
            this.posts = this.snapshotToArray(snap);
            console.log(this.posts)
        })
      })
    }

snapshotToArray(snapshot){
    let returnArr = [ ];
    snapshot.forEach(childSnapshot => {
      let item = childSnapshot.val();
      item.key = childSnapshot.key;
      returnArr.push(item);
    });
    return returnArr;
  }

以下是该视图的代码：

<ion-row>
  <ion-col text-center>
      <ion-card *ngFor="let post of posts; let i = index;" style="width:50%; height:25%;">
        <ion-item>
          Post: {{post.title}}
        </ion-item>
      </ion-card>
  </ion-col>
</ion-row>

当我在控制台中登录时，将显示this.posts的数据。然而，直到我单击页面上的某个元素（例如打开菜单或点击按钮），posts才显示在页面上。

但是，当我使用this.postsRef.once()时，页面上将按原样显示posts。这是一些已知的Firebase /离子问题吗？

就像我之前说的，this.posts正在将快照捕获到数组中，因此应该在页面中对其进行更新。