TypeScript嵌套异步函数

profile.page.ts:

  username: string;
  totalScore: number;
  ...


  loadUserData() {
    this.spinnerDialog.show();
    this.firebaseServie.loadUserData().then(() => {
      this.username = this.sessionData.getUser().getUsername();
      this.totalScore = this.sessionData.getUser().getTotalScore();
       ....
    });

firebase.service.ts

：

async loadUserData() {
    console.log(this.sessionData.getUser().getEmail());
    this.userCollection = this.afs.collection('users', ref => ref.where('email', '==', this.sessionData.getUser().getEmail().toLowerCase()));

    this.userDoc = this.afs.collection("users").doc(this.sessionData.getUser().getEmail().toLowerCase());

    this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
      this.userLoadedUser = item;
      console.log("Found user by email id " + this.sessionData.getUser().getEmail() + ":" + this.userLoadedUser.username);
      this.sessionData.getUser().setUsername(this.userLoadedUser.username);
      this.sessionData.getUser().setTotalScore(this.userLoadedUser.totalScore);
      ....

    }));
  }

loadUserData() {
    return new Promise((resolve, reject) => {
        ...
        this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
            ...
            resolve(); // If everything worked!
        }));
        ...
    });
}

那么，我如何才能确保

then（）

子句中的部分仅在我们从firebase获得数据后执行

---

为了更好地理解，我对我的问题进行了编辑。

因为订阅表明您正在处理一个可观察的问题，所以最好不要开始与承诺混淆，而只使用可观察的管道和

pipe

otherfunc()
    .pipe(map(myfunc))
    .subscribe((item:User) => {

});

如果你真的想要承诺，你可以把可观察的转化为承诺

otherfunc().toPromise().then(myfunc).then(e => {
    // runs after
});

---

您只需在

firebase.service.ts

中返回一个新承诺：

async loadUserData() {
    console.log(this.sessionData.getUser().getEmail());
    this.userCollection = this.afs.collection('users', ref => ref.where('email', '==', this.sessionData.getUser().getEmail().toLowerCase()));

    this.userDoc = this.afs.collection("users").doc(this.sessionData.getUser().getEmail().toLowerCase());

    this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
      this.userLoadedUser = item;
      console.log("Found user by email id " + this.sessionData.getUser().getEmail() + ":" + this.userLoadedUser.username);
      this.sessionData.getUser().setUsername(this.userLoadedUser.username);
      this.sessionData.getUser().setTotalScore(this.userLoadedUser.totalScore);
      ....

    }));
  }

loadUserData() {
    return new Promise((resolve, reject) => {
        ...
        this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
            ...
            resolve(); // If everything worked!
        }));
        ...
    });
}

---

我希望这有帮助

如果上面的函数位于页面组件上，而下面的函数位于服务中，该怎么办？然后简单地调用服务方法。不管它在哪里，只要它是可访问的，但是

.pipe（map（myfunc））

要求我将页面模块导入服务，这不是一种好的编程风格。请参见我的

profile.page.ts

（angular）我有

这个.firebaseServie.loadUserData（）。然后（（）=>{//这里设置html字段值

，然后我有

firebase.service.ts

：

异步loadUserData（）{…..x=this.userDoc.valueChanges（）.pipe（）。订阅（（项目：User）=>{//这里我从firebase加载数据

，因此只有在加载firebase数据后，才应该设置html字段的值。这就是我想要编辑我的问题以更好地理解的内容