时间戳

首页 > 解决方案 > 使用 Angular Native 和 Firebase 更新配置文件

typescript - 使用 Angular Native 和 Firebase 更新配置文件

问题描述

我有一个问题，在更新用户凭据时，更改不会反映在特定页面上。根据其文档，updateProfile应该返回 a reloadUser，这已经在我的代码中。这里是否缺少步骤或代码？

  editProfile(displayName, contactNumber, uid) {
    firebase
      .updateProfile({
        displayName: displayName
      })
      .then(
        function() {
          return firestore
            .collection("users")
            .doc(uid)
            .set(
              {
                displayName: displayName,
                contactNumber: contactNumber
              },
              { merge: true }
            );
        },
        function(errorMessage) {
          console.log(errorMessage);
        }
      );
    firebase.reloadUser().then(
      function() {
        firebase
          .getCurrentUser()
          .then(user => console.log("User uid: " + user.uid))
          .catch(error => console.log("Trouble in paradise: " + error));
      },
      function(errorMessage) {
        console.log(errorMessage);
      }
    );
  }

请帮助我如何重新加载组件以显示 Angular Native 中的所有更改。谢谢！

标签： typescriptfirebasenativescriptnativescript-angular

解决方案

调用updateProfile是一个异步操作，因为它需要时间来完成。更新完成后，将then调用 ，但到那时您已经调用了reloadUser.

我建议在调试器中运行它，并添加一些日志记录。您会看到您的呼叫在of ever 运行reloadUser之前开始，这解释了为什么您没有获得更新的配置文件。then()updateProfile()

这类问题的解决方案总是相同的：任何需要异步操作结果的代码都必须在该操作完成时运行的then回调中。

所以：

firebase
  .updateProfile({
    displayName: displayName
  })
  .then(
    function() {
      firebase.reloadUser().then(
        function() {
          firebase
            .getCurrentUser()
            .then(user => console.log("User uid: " + user.uid))
            .catch(error => console.log("Trouble in paradise: " + error));
        },
        function(errorMessage) {
          console.log(errorMessage);
        }
      );
      return firestore
        .collection("users")
        .doc(uid)
        .set(
          {
            displayName: displayName,
            contactNumber: contactNumber
          },
          { merge: true }
        );
    },
    function(errorMessage) {
      console.log(errorMessage);
    }
  );

这些天来，它的使用很普遍async，await并使这段代码更容易阅读。使用async/await和其他现代 JavaScript，上面的内容变为：

await firebase
  .updateProfile({
    displayName: displayName
  });
await firebase.reloadUser();
let user = await firebase.getCurrentUser()
console.log("User uid: " + user.uid);
return firestore
        .collection("users")
        .doc(uid)
        .set(
          {
            displayName: displayName,
            contactNumber: contactNumber
          },
          { merge: true }
        );

推荐阅读