angular - Angular Firebase 获取 ZoneAwarePromise

Question

我正在尝试构建此功能以在我的应用程序的个人资料页面上上传个人资料图片，问题是我得到ZoneAwarePromise了图片上传功能的结果。我尝试了很多不同的东西，但无法改变结果。

有谁能够帮我？我究竟做错了什么？

上传服务.ts

pictureUpload(file: any, uid: string) {
    return this.afUpload.upload('profile/' + uid, file);
}

profile.component.ts

onCreateUser() {
    const picture = this.uploadService.pictureUpload(this.fileInput.nativeElement.files['0'], currentUserID).then(
      async (data) => {
        try {
          return data.ref.getDownloadURL();
        } catch {
          console.error();
        } finally {
          const email = this.userProfileForm.value.email;
          const firstName = this.userProfileForm.value.firstName;
          const lastName = this.userProfileForm.value.lastName;

          const userObj = {
            'uid': currentUserID,
            'email': email,
            'firstName': firstName,
            'lastName': lastName,
            'picture': picture
          };

          console.log('the object is');
          console.log(userObj);

          if (this.editMode) {
            return this.db.object('profile/' + currentUserID).update(userObj).then(
              () => {
                return this.presentToaster('Dados atualizados');
              },
              (e) => {
                this.presentToaster(e);
                console.error(e);
              }
            );
          } else {
            const load = await this.loadCtrl.create({
              message: 'Criando Usuario'
            });
            await load.present();
            return this.db.object('profile/' + currentUserID).set(userObj).then(
              () => {
                load.dismiss();
                return this.navCtrl.navigateRoot('news');
              },
              (error) => {
                load.dismiss();
                this.presentToaster(error);
                console.error(error);
              }
            );
          }
        }
      },
      (error) => {
        console.error(error);
      }
    );
  }

标签： angularfirebaseionic-frameworkangularfire2

Answer 1

我终于明白了。

免责声明：这是我的第一个 Firebase 项目，因此以下所有描述均基于我的观察。如果我对任何事情有误，请纠正我，我希望能真正理解这一点。谢谢 ：）

基本上，当我得到时，try我希望能取回数据，在这种情况下data.ref.getDownloadURL()。因为这将是一个承诺，所以我使用该.then方法接收“完整”数据，然后在该响应中运行其他所有内容。我似乎只存在那里的数据。

onCreateUser(uForm: FormGroup) {
    const currentUserID = this.userAuth.getCurrentUserID();
    let picture;
    this.uploadService.pictureUpload(this.fileInput.nativeElement.files['0'], currentUserID).then(
      async (data) => {
        try {
          data.ref.getDownloadURL().then(
            async (downloadURL) => {
              picture = downloadURL;
              const email = this.userProfileForm.value.email;
              const firstName = this.userProfileForm.value.firstName;
              const lastName = this.userProfileForm.value.lastName;

              const userObj = {
                'uid': currentUserID,
                'email': email,
                'firstName': firstName,
                'lastName': lastName,
                'picture': picture
              };

              if (this.editMode) {
                return this.db.object('profile/' + currentUserID).update(userObj).then(
                  () => {
                    return this.presentToaster('Dados atualizados');
                  },
                  (e) => {
                    this.presentToaster(e);
                    console.error(e);
                  }
                );
              } else {
                const load = await this.loadCtrl.create({
                  message: 'Criando Usuario'
                });
                await load.present();
                return this.db.object('profile/' + currentUserID).set(userObj).then(
                  () => {
                    load.dismiss();
                    return this.navCtrl.navigateRoot('news');
                  },
                  (error) => {
                    load.dismiss();
                    this.presentToaster(error);
                    console.error(error);
                  }
                );
              }
              //
            }
          );
        } catch (error) {
          console.error(error);
        }
      },
      (error) => {
        console.error(error);
      }
    );

  }