用户数据未显示在 Ionic 2 和 Firebase 3 的 Html 页面上

Question

我正在使用一个项目从Firebase获取一些用户数据。 我想将数据放入"个人资料页面"中。 除了一个问题外，一切正常。 数据不会显示在html页面上，直到我单击页面中的项目，例如编辑一些数据。 如果我单击返回，然后重新进入页面，数据也会显示。 因此，这就像数据加载空白模板，但一旦收到来自Facebook的数据，就永远不会更新它。 有什么建议吗？ 以下是该页面中的一些代码。

简介.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Profile</ion-title>
    <ion-buttons end>
      <button ion-button item-left icon-right (click)="logOut()">
        <ion-icon name=""></ion-icon>
        Logout
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-list-header>
      Personal Information
    </ion-list-header>
    <ion-item (click)="updateName()">
      <ion-grid>
        <ion-row>
          <ion-col width-50>
            Name
          </ion-col>
          <ion-col *ngIf="userProfile?.firstName || userProfile?.lastName">
            {{userProfile?.firstName}} {{userProfile?.lastName}}
          </ion-col>
          <ion-col class="placeholder-profile" *ngIf="!userProfile?.firstName">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item>
      <ion-label class="dob-label">Date of Birth</ion-label>
      <ion-datetime displayFormat="MMM D, YYYY" pickerFormat="D MMM YYYY"
        [(ngModel)]="birthDate" (ionChange)="updateDOB(birthDate)"></ion-datetime>
    </ion-item>
    <ion-item (click)="updateEmail()">
      <ion-grid>
        <ion-row>
          <ion-col width-50>
            Email
          </ion-col>
          <ion-col width-50 *ngIf="userProfile?.email">
            {{userProfile?.email}}
          </ion-col>
          <ion-col class="placeholder-profile" *ngIf="!userProfile?.email">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item (click)="updatePassword()">
      <ion-grid>
        <ion-row>
          <ion-col width-50>
            Password
          </ion-col>
          <ion-col class="placeholder-profile">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>
</ion-content>

这是来自profile.ts页面的代码

import { NavController, AlertController } from 'ionic-angular';
import { Component } from '@angular/core';
import { ProfileData } from '../../providers/profile-data';
import { AuthData } from '../../providers/auth-data';
import { LoginPage } from '../login/login';
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {
  public userProfile: any;
  public birthDate: string;
  zone: NgZone;
  constructor(public navCtrl: NavController, public profileData: ProfileData,
    public authData: AuthData, public alertCtrl: AlertController) {
  }

  ionViewDidEnter(){
    this.profileData.getUserProfile().on('value', (data) => {
      this.userProfile = data.val();
      this.birthDate = this.userProfile.birthDate;
    });
  }

我还尝试按照其他人的建议将其包装在 NgZone 对象中，如下所示：

import { NavController, AlertController } from 'ionic-angular';
import { Component } from '@angular/core';
import { ProfileData } from '../../providers/profile-data';
import { AuthData } from '../../providers/auth-data';
import { LoginPage } from '../login/login';
import { NgZone } from '@angular/core';
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {
  public userProfile: any;
  public birthDate: string;
  zone: NgZone;
  constructor(public navCtrl: NavController, public profileData: ProfileData,
    public authData: AuthData, public alertCtrl: AlertController) {
    this.zone = new NgZone({});
    this.zone.run(() => {
      //Your promise code
      this.profileData.getUserProfile().on('value', (data) => {
        this.userProfile = data.val();
        this.birthDate = this.userProfile.birthDate;
      });
    });
  }

这些似乎都行不通。 数据就在那里，直到我单击项目/UI 对象时才显示，然后它正确填充。 帮助！

Answer 1

你必须像下面这样做。希望代码是不言自明的。如果您有任何疑问，请在下面发表评论。

如何安装Angularfire2？

ProfileData.ts

import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
@Injectable()
export class ProfileData {
     constructor(public af: AngularFire) {}
     getUserProfile(data: string): FirebaseObjectObservable<any> {
        return this.af.database.object(`path-to-your-firebase-object`);
      }
}

您的组件.ts

public profile: any;
 constructor(public profileData: ProfileData) {
    this.profileData.getUserProfile(your-user-id).subscribe(profileSnap => {
      this.profile= profileSnap ;
    });
  }