ionic 2 不会根据 Firebase 实时数据库的变化更新页面

Question

我正在使用 Ionic 2 和 Firebase 为我的项目构建应用程序。当新帖子添加到 Firebase 时，应用程序应该会更新，但在我的情况下，我必须移动到新页面并返回同一页面才能查看更新

这是我列出帖子的功能

realTimeListPosts() {
var that = this;
this.postsService.postsNode.on('value', snapshot => {
  that.userPostsLists.length = 0;
  snapshot.forEach(function (childSnapshot) {
    var data = childSnapshot.val();
    data['key'] = childSnapshot.key;
    that.userPostsLists.push(data);
  });
});
}

userPostsLists 是一个数组，我使用 NgFor 来显示这个数组，下面是我使用的提供程序的构造函数（postService）

constructor(public http: Http, public preloader: Preloader) {
this.postsNode = firebase.database().ref('posts');
}

这是实现 realTimeListPosts() 的地方

constructor(public navCtrl: NavController, private loadingCtrl: LoadingController, private alertCtrl: AlertController, private viewCtrl: ViewController, public postsService: PostServices, public userServices: UserServices) {
this.userProfileLists = userServices.userProfile;
this.userId = userServices.fireAuth.currentUser;
this.realTimeListPosts();
}

这是html页面

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <button ion-button icon-only (click)="addNewPostPage()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-card *ngFor="let post of userPostsLists">
    <ion-item>
      <ion-avatar item-left>
        <img src="{{post.photo}}">
      </ion-avatar>
      <h2>{{post.name}}</h2>
    </ion-item>
    <img src="{{post.postPhoto}}">
    <ion-item>
    <h1>{{post.title}}</h1>
    <h2>{{post.category}}</h2>
    <p>{{post.subCategory}}</p>
  </ion-item>
    <ion-card-content>
      <p>{{post.body}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small (click)="goToComments(post)">
        <ion-icon name="text"></ion-icon>
        <div>Comments</div>
      </button>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

Answer 1

使用如下所示的NgZone 实现，并进行下面提到的其他小改动。

你必须使用如下所示的粗箭头函数。不需要这个静态赋值var that = this;。删除它并使用let而不是var。

import { Component, NgZone } from '@angular/core';

zone: NgZone;

realTimeListPosts() {
 this.zone = new NgZone({});
   this.postsService.postsNode.on('value', snapshot => {
     this.zone.run(() => {
      this.userPostsLists.length = 0;
       snapshot.forEach(childSnapshot =>  {
       let data = childSnapshot.val();
       data['key'] = childSnapshot.key;
       this.userPostsLists.push(data);
  });
 });
});
}