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

Question

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

profile.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

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

How to install 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`);
      }
}

YourComponent.ts

public profile: any;

 constructor(public profileData: ProfileData) {

    this.profileData.getUserProfile(your-user-id).subscribe(profileSnap => {
      this.profile= profileSnap ;
    });
  }