Question

我正在使用一个项目从Firebase获取一些用户数据。我想将这些数据放入＆＃34;个人资料页面＆＃34;。一切都有效，除了一个问题。在我点击页面中的某个项目之前，数据不会显示在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 ;
    });
  }

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

1 个答案: