Javascript Angular 9 ngIf不使用firebase登录弹出窗口

我对ngIf有一个奇怪的问题。即使将布尔值从false更改为true，内容也不会显示在UI上

我有两个变量，分别称为

display\u phone

设置为false和

display\u mail

设置为true。firebase Gmail登录后，我切换这两个变量，将

display\u phone

设置为true，将

display\u mail

设置为false。但用户界面并没有改变。它不会呈现设置为

display\u phone

先谢谢你

这是代码

.ts

html

display\u mail//在执行handle\u user（）函数后不隐藏此标记
display\u phone//在执行handle\u user（）函数后不显示此标记
使用谷歌登录

出现此问题是因为调用了

Firebase

承诺函数，Angular不知道结果。所以Angular不可能检测到更改并更新视图

别担心，保持代码简单，您应该直接使用AngularFire提供的

Observable

来接收当前身份验证状态的更新

它更强大，因为如果用户断开连接，以及任何身份验证状态的刷新，也会通知您

AngularFireAuth.user为您提供了一个可观察对象来监视应用程序的身份验证状态

代码摘录自：

@组件({
选择器：'应用程序根'，
模板：`
你好{{user.displayName}}！
注销
请登录

使用谷歌登录
`,
})
导出类AppComponent{
构造函数（公共授权：AngularFireAuth）{
}
登录（）{
this.auth.signInWithPopup（新auth.GoogleAuthProvider（））；
}
注销（）{
this.auth.signOut（）；
}
}

如果您需要将

用户

操作到您的代码中，您可以订阅更新：

  subscription: Subscription;

  constructor(public auth: AngularFireAuth) {
  
    this.subscription = auth.user.subscribe(user => {
      // do something with current user
      if (user) { ... }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

---

出现此问题是因为调用了

Firebase

promisted函数，而Angular不知道结果。所以Angular不可能检测到更改并更新视图

别担心，保持代码简单，您应该直接使用AngularFire提供的

Observable

来接收当前身份验证状态的更新

它更强大，因为如果用户断开连接，以及任何身份验证状态的刷新，也会通知您

AngularFireAuth.user为您提供了一个可观察对象来监视应用程序的身份验证状态

代码摘录自：

@组件({
选择器：'应用程序根'，
模板：`
你好{{user.displayName}}！
注销
请登录

使用谷歌登录
`,
})
导出类AppComponent{
构造函数（公共授权：AngularFireAuth）{
}
登录（）{
this.auth.signInWithPopup（新auth.GoogleAuthProvider（））；
}
注销（）{
this.auth.signOut（）；
}
}

如果您需要将

用户

操作到您的代码中，您可以订阅更新：

  subscription: Subscription;

  constructor(public auth: AngularFireAuth) {
  
    this.subscription = auth.user.subscribe(user => {
      // do something with current user
      if (user) { ... }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

---

谢谢你的回答@Thierry Falvo。但是我怎样才能访问额外的用户信息呢。我需要知道isnewuser字段。事实上，您似乎正在使用AngularFire的旧版本，不是吗？我认为第6版和第9版可以解决你的问题。您能检查一下您使用的是哪一种版本的AngularFire吗？是的。我使用的是角火版本5。将更新到版本6。谢谢你，谢谢你的回答。但是我怎样才能访问额外的用户信息呢。我需要知道isnewuser字段。事实上，您似乎正在使用AngularFire的旧版本，不是吗？我认为第6版和第9版可以解决你的问题。您能检查一下您使用的是哪一种版本的AngularFire吗？是的。我使用的是角火版本5。将更新到版本6。非常感谢。

  subscription: Subscription;

  constructor(public auth: AngularFireAuth) {
  
    this.subscription = auth.user.subscribe(user => {
      // do something with current user
      if (user) { ... }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }