Angularfire 未定义变量

Question

我尝试使用 angularfire2 从 firebase 获取实时数据库中的当前用户存储

  public user: any;
  public userRef: any
  public currentUser: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private fireAuth: AngularFireAuth,
    private userProvider: UserProvider,
    private fireDateBase: AngularFireDatabase
  ) {
    this.currentUser = this.fireAuth.auth.currentUser.uid;
    this.userRef = this.fireDateBase.object('CITYNAV_USERS/' + this.currentUser);
    this.getCurrentUser();
  }

  ionViewDidLoad() {
  }

  public getCurrentUser(): void {
    this.userRef.snapshotChanges().subscribe(action => {
      this.user = action.payload.val();
      console.log(this.user);
    });
  }

但出于某种原因，当 this.user 告诉它未定义时，我不知道为什么。任何想法。

HTML

<ion-content padding>
  <div class="wrapper-profile">
    <img src="assets/imgs/logo-f.png" alt="">
    <div class="wrapper-avatar">
      <div class="avatar">
        <img src="{{user.avatar}}" alt="avatar">
      </div>
      <button ion-button color="icons-color" clear>Cambiar imagen</button>
    </div>
  </div>
  <div class="wrapper-profile-form">
    <ion-item>
      <ion-label>
        <ion-icon name="ios-person-outline"></ion-icon> Nombre</ion-label>
      <ion-input clearInput type="text" [(ngModel)]="user.name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>
        <ion-icon name="ios-mail-outline"></ion-icon> Email</ion-label>
      <ion-input clearInput type="email" [(ngModel)]="user.email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>
        <ion-icon name="ios-lock-outline"></ion-icon> Password</ion-label>
      <ion-input clearInput type="password" [(ngModel)]="user.password"></ion-input>
    </ion-item>
    <div class="profile-btn">
      <button class="btn-edit" ion-button color="secondary" round>Editar informacion</button>
      <button class="btn-logout" ion-button color="secondary" (click)="logOut()" round>Log Oout</button>
    </div>
  </div>
</ion-content>

这里是 html 从实时数据库中获取用户对象后呈现的对象。

控制台记录响应对象

    Object { 
      avatar: "assets/imgs/avatar.jpg", 
      created: "Wed Nov 08 2017 16:54:53 GMT+0100", 
      email: "mianfrigo@gmail.com", 
      password: "Atenas10", 
      rol: "user", 
      userName: "Miguel Frias" 
    }

Answer 1

您需要将 console.log 放在 subsrcibe、

中

public getCurrentUser(): void {
    this.userRef.snapshotChanges().subscribe(action => {
      this.user = action.payload.val();
      console.log(this.user);
    });

  }

Answer 2

现在，当您进行适当的更改以将控制台日志置于回调中时 (subscribe)...

您可以初始化 user 或在模板中使用 *ngIf，因为数据是异步的，视图在数据到达之前呈现。或者您可以使用安全导航运算符，虽然安全导航运算符不适用于双向绑定，因此您需要将其拆分为单向绑定和 ngModelChange:

<input [ngModel]="user?.name" (ngModelChange)="user.name = $event"/>

或者如上所述，您可以使用 ngIf 并将模板包装在 div 中，例如：

<div *ngIf="user">
  <!-- code here-->
</div>

或者也许最简单的解决方案是只初始化对象。如果您的对象中没有嵌套对象，这将起作用。所以只需初始化您的用户：

user = {};

Angularfire 未定义变量

Angularfire undefined variable

firebase

ionic-framework

angularfire2

angular