不以离子角度保存数据的变量

Question

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

share-service.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”，
• “离子角”：“3.9.2”，
• "rxjs": "^5.5.6",
• "@ionic/app-scripts": "3.1.8",
• “打字稿”：“2.4.2”

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

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

需要建议，请。

Answer 1

这是你的阅读方式..

 userData() {
    return this.db.object(`users/${this.uid}`).snapshotChanges()
    .pipe(map(data => {

      this.user = data.payload.val();
      return this.user;
      console.log('[userData]user: ', this.user);
    }));//import { map } from 'rxjs/operators/map';

}

如果您想在任何地方访问它，请在getUser() 上使用subscribe()。

  getUser(){
    if(!this.user){
        return this.userData();//return the db call if not set
    }else{
    return of(this.user);//import {of} from 'rxjs/Observable/of;'
  }

在构造函数中，

  constructor(public db: AngularFireDatabase) {
    let currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;
    this.getUser().subscribe(u=>{
        console.log('[constructor]user: ', u);
    });//subscribe to the observable.
  }

Answer 2

Angular 为这种类型的 Async 方法提供了Async Pipe。

用户信息将来自firebase服务器，这需要时间。
同时，javascript继续执行。

这就是为什么您将this.user 设置为undefined 的原因，因为当JS 执行该行时，数据不是来自服务器而不是分配给它。

所以我们需要通过

来处理这种类型的方法

• 回调 -- callback to promises
• promises
• async-await
• （此处为角度大小写）observables

所以 试试这个

share-service.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>