Angular 从Promise.catch（）更新角度组件字段不会更新UI

我是Angular的新手，所以可能我在这里遗漏了一些重要的东西，但是我使用的代码可以在很多存储库中找到，我在问自己我在这里做错了什么

所以我有一个登录组件，我想在其中使用Firebase OAuth进行登录。OAuth部分工作正常。我可以通过Facebook、谷歌或电子邮件登录。当已经有用户使用这封或那封电子邮件时，问题就出现了。这是我的facebook登录代码：

onLoginFacebook() {
  this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .catch(error => {
      this.error = error.message;
    });
}

当已有用户发送给定电子邮件时，尝试登录将导致消息出错

"An account already exists with the same email address but different sign-in credentials. Sign in using a provider associated with this email address."

如您所见，我只是将此错误消息分配给组件的一个变量，该变量声明为：

public error: string;

在我的组件模板中，我希望使用一个span来显示错误消息（目前，这对我来说已经足够好了，因为我刚刚开始并计划在以后实现正确的错误处理）：

{{error}

问题是：在我的组件中设置错误消息后，什么也没有发生。但是，如果我点击任何按钮或输入，消息会突然出现

---

我认为Angular会在设置变量后自动更新UI，如果在catch（）函数之外设置变量，e。G通过setTimeout（（）=>this.error=“test”，2000），它可以像我预期的那样工作。那么我错过了什么或做错了什么（

这是Angular中的一个bug。Angular用于实现更改检测。区域基本上跟踪异步上下文

angular实现这种多边形填充的方法是修补平台上的每个异步API

如果我们仔细查看代码，我们可以看出如果设置了

window.Promise

，那么

将被覆盖，但是
.catch
不会被覆盖。您的代码可能在某个地方分配了
Promise
，应该处理的代码如下所示：

if (NativePromise) {
  patchThen(NativePromise);

  // ...

虽然
ZoneAwarePromise
确实定义了一个
.catch
，但我们可以看到
patchThen
只提供了补丁
.then
，并且没有覆盖
.catch
。我已经为zone.js打开了它。
这是Angular.Angular用于实现更改检测的一个bug。zone基本上跟踪异步上下文

angular实现这种多边形填充的方法是修补平台上的每个异步API

如果我们仔细查看代码，我们可以看出如果设置了
window.Promise
，那么
将被覆盖，但是
.catch
不会被覆盖。您的代码可能在某个地方分配了
Promise
，应该处理的代码如下所示：

if (NativePromise) {
  patchThen(NativePromise);

  // ...

虽然
ZoneAwarePromise
确实定义了一个
。catch
我们可以看到
patchThen
只包含补丁
。然后
并且不覆盖
。catch
。我已经打开了zone.js。
检查
zone.current.name
并尝试
zone.run
这个zone属性应该来自哪里？这是第三个吗party library？我想让我的代码尽可能干净和简单，以便now@yurzui
Zone
与这个问题有什么关系？@IgorSoloydenko Angular 2通过使用Zone进行更改检测。基本上每个异步操作都包装在一个Zone中-Zone有一个非常有趣的错误处理案例（以至于节点都在阻止它们）-其中一部分是抽象，它们自己进行错误处理（如承诺/可观察）做他们自己的错误处理-Angular没有正确地使用Zone来包装承诺。幸运的是，有一个人在这两方面都是专家，我会给他发电子邮件问这个问题。看起来漏洞在Angular的Zone.js中，我会提出一个问题。检查
Zone.current.name
并尝试
Zone.run
这个Zone属性应该在哪里合作我来自？这是第三方库吗？我想让我的代码尽可能干净和简单now@yurzui
Zone
与这个问题有什么关系？@IgorSoloydenko Angular 2使用Zones进行更改检测。基本上，每个异步操作都包装在一个Zone中-Zones有一个非常有趣的错误处理案例（如此之多，以至于节点正在阻止它们）——部分原因是抽象本身进行错误处理（如承诺/可观察）做他们自己的错误处理-Angular没有正确地使用Zone来包装承诺。幸运的是，有一个人在这两方面都是专家，我会给他发电子邮件问这个问题。看起来漏洞在Angular的Zone.js中，我会提出一个问题。问题中指出，这实际上是违反ECMAScript规范的行为，有兴趣的是问题中指出这实际上是一个ECMAScript规范违反，有趣的是问题中指出这实际上是一个ECMAScript规范违反，有趣的是问题中指出这实际上是一个ECMAScript规范违反，有趣的