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();
  }
}

我想根据登录状态修改代码以显示/隐藏正确的按钮。我可以在控制台中看到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，但是......如果auth从null切换回来，你可以存储和使用它。存储它，例如，当您订阅时，您可以订阅auth => this.auth = auth而不是console.log，然后您可以像这样使用它：

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

也许这不是最好的方法。您还可以创建一个布尔值，如isLogged，并使用它来显示/隐藏按钮。

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

Answer 2

我认为你应该寻找AsyncPipe和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 ng如果不更新DOM？

2 个答案: