javascript - 变量不保存 ionic Angular 数据

Question

我很困惑为什么变量不成立。
我有一个变量 user ，它是用 userData() 中的数据分配的。但当控制台在构造函数和ProfilePage 中登录时，它是未定义的。

共享服务.ts

export class ShareService {
  uid: string;
  user;

  constructor(public db: AngularFireDatabase) {
    let currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;
    this.userData();
    console.log('[constructor]user: ', this.user);
  }

  userData() {
    this.db.object(`users/${this.uid}`).snapshotChanges().subscribe(data => {
      this.user = data.payload.val();
      console.log('[userData]user: ', this.user);
    });
  }

  getUser() {
    return this.user;
  }

}

profile.ts

export class ProfilePage {
  user;

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService, shareService: ShareService) {
    console.log('[profile.ts]', shareService.getUser());
  }

}

• “angularfire2”:“5.0.0-rc.4”，
• “firebase”:“4.8.2”，
• “ ionic Angular ”:“3.9.2”，
• "rxjs": "^5.5.6",
• “@ionic/app-scripts”:“3.1.8”，
• “ typescript ”:“2.4.2”

我已经尝试过搜索类似的问题，例如 this并读到它与 Angular 如何异步有关，然后经过进一步调查，我读到需要 promise ，如 this 。我还在某处读到应该使用 .then() 。

我尝试了多种方法来将这些实现到这个用例场景中，但结果都出现了语法错误。

需要建议，请。

Answer 1

Angular 提供 Async Pipe对于这种类型的异步方法。

user information will be come from firebase server, and it will take time.
in the meanwhile, javascript continues its execution.

这就是为什么你的 this.user 为 undefined，因为当 JS 执行该行时，数据不是来自服务器，也不会分配给它。

所以我们需要通过

来处理这种类型的方法

• 回调 -- callback to promises
• promises
• async-await
• (此处为 Angular 情况)observables

所以 试试这个

共享服务.ts

export class ShareService {
 uid: string;

 constructor(public db: AngularFireDatabase) {
 let currentUser = firebase.auth().currentUser;
 this.uid = currentUser.uid;
 }

 getUser() {
   return this.db.object(`users/${this.uid}`)
     .snapshotChanges()
     .map(data => data.payload.val());
 }
}

profile.ts

export class ProfilePage {
 user;

 constructor(public navCtrl: NavController, public firebaseService: 
  FirebaseService, shareService: ShareService) {
  this.user = shareService.getUser();
 }
}

在模板中

<div *ngIf="user | async as _user; else loadingUsers">
  {{_user.username}}
</div>
<ng-template #loadingUsers>
  Loading...
</ng-template>