Angular2 ngIf 不更新 DOM？

Question

我似乎无法找到 ngIf 正确计算的正确表达式。

我遵循了简单的 Angularfire2 example here，它让我可以正确登录和注销。

import { Component } from '@angular/core';
import { AngularFire } from 'angularfire2';

@Component({
  selector: 'app-root',
  template: `
  <div> {{ (af.auth | async)?.uid }} </div>
  <button (click)="login()">Login</button>
  <button (click)="logout()">Logout</button>
  `,
})
export class AppComponent {
  constructor(public af: AngularFire) {
    this.af.auth.subscribe(auth => console.log(auth));
  }

  login() {
    this.af.auth.login();
  }

  logout() {
     this.af.auth.logout();
  }
}

我想根据登录状态将代码修改为 show/hide 正确的按钮。我可以在控制台中看到 auth 从 null 切换到 object 并返回，但是 DOM 没有更新。

这是最新的尝试：

<div> {{ (af.auth | async)?.uid }} </div>
<button *ngIf="!(auth | async)" (click)="login()">Login</button>
<button *ngIf="auth | async" (click)="logout()">Logout</button>

我做错了什么？我怎样才能正确评估它？

Answer 1

编辑：您没有在 login 和 logout 方法中订阅已更改的登录状态，因此您应该添加：this.af.auth.subscribe(auth => this.auth = auth); 到方法中。

我不熟悉 Angularfire，但是...如果身份验证从 null 切换回来，您可以存储和使用它。存储它，例如当你订阅时，你可以订阅 auth => this.auth = auth 而不是 console.log，然后你就可以像这样使用它：

<button *ngIf="auth == null" (click)="login()">Login</button>
<button *ngIf="auth != null" (click)="logout()">Logout</button>

也许这不是最好的方法。您还可以创建一个布尔值，例如 isLogged 并将其用于 show/hide 个按钮。

当然，可能有更好的方法来做到这一点...但至少这里有一个选择。

Answer 2

我认为你应该寻找 AsyncPipe and safe navigation operator (?.) 来理解 (af.auth | async)?.uid 表达式

template: `
<div [ngSwitch]="(af.auth | async)?.uid">
 <button *ngSwitchCase="null" (click)="login()">Login</button>
 <button *ngSwitchDefault (click)="logout()">Logout</button>
</div>`

Angular2 ngIf 不更新 DOM？

Angular2 ngIf not updating DOM?

angularfire2

angular