javascript - *ngIf 上使用的 Angular 4 构造函数值

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 6 年前。

在下面的 typescript 代码中，我有一个值 moreinfo我将其初始化为 1。之后，在构造函数内，我将值更改为 2。因此，对于值 1，我显示一个 div与 *ngIf对于值 2，我显示不同的 div 。一切都很完美，我看到该值已从控制台正确更改为 2。

export class LoginComponent implements OnInit {
  moreinfo: number=1;
  email: string;
  password: string;

  constructor(public afAuth: AngularFireAuth, public af: 
    AngularFireDatabase,public authService: AuthService) {

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.moreinfo=2;
        var user2 = firebase.auth().currentUser;
        console.log("Current user id:" + user2.uid + "\nMoreinfo:" + this.moreinfo);
      } else {
        console.log("No user is signed in."); 
      }
    });
  }
}

但是，当我比较 HTML 中的值时，它显示 div与 morevalue == 1;尽管该值已更改为 2。有没有人可以阐明我的问题？

<div class="container" *ngIf="moreinfo == 1">
  <h1 *ngIf="authService.user | async">Welcome {{ (authService.user | async)?.email }}!</h1>
</div>

<div class="container" *ngIf="moreinfo == 2">
  something
</div>

Answer 1

我认为这是因为您使用的闭包不正确，而不是匿名函数，请尝试使用箭头函数，它应该在组件中设置值 - 而不仅仅是在函数中。

像这样:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.moreinfo=2;
    var user2 = firebase.auth().currentUser;
    console.log("Current user id:" + user2.uid + "\nMoreinfo:" + this.moreinfo);
  } else {
    console.log("No user is signed in."); 
  }
});