变量不以离子角度

Question

我很困惑为什么变量没有保留 我有一个变量用户，它在 userData（）中分配了数据。但是当控制台在构造函数和 ProfilePage 中登录时，它是未定义的。

共享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());
  }

}

• ＆＃34; angularfire2＆＃34;：＆＃34; 5.0.0-rc.4＆＃34;，
• ＆＃34; firebase＆＃34;：＆＃34; 4.8.2＆＃34;，
• ＆＃34; ionic-angular＆＃34;：＆＃34; 3.9.2＆＃34;，
• ＆＃34; rxjs＆＃34;：＆＃34; ^ 5.5.6＆＃34;，
• ＆＃34; @ ionic / app-scripts＆＃34;：＆＃34; 3.1.8＆＃34;，
• ＆＃34;打字稿＆＃34;：＆＃34; 2.4.2＆＃34;

我已经尝试过搜索类似this之类的类似问题，并且读到它与异步的角度有关，然后在进一步调查后我读到了承诺需要this。我还读到了应该使用 .then（）的地方。

我尝试了几种方法来实现这个用例场景，但结果都是语法错误。

请提出建议。

Answer 1

以下是您的阅读方式..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-body d-flex flex-column">
    <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
        <li>stuff</li>
    </ul>
    <div class="mt-auto">
        <button type="button" class="btn btn-outline-primary">Edit</button>
        <button type="button" class="btn btn-outline-primary">Delete</button>
    </div>
</div>

}

如果您想在任何地方访问它，请使用 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'; 上的subscribe()。

getUser()

在构造函数中，

  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;'
  }

Answer 2

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

  

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

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

所以我们需要通过

处理这种方法

• 回调 - callback to promises
• promises
• async-await
• （此处为有角度的情况）observables

所以 试试这个

<强>共享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>