Question

我尝试使用* ngIf指令和Observable显示/隐藏元素。当我直接从模板连接到authService时，一切正常。但是，当我在模板中使用带异步管道的可观察对象时，这将不起作用。

// the following works:
<ng-container
  *ngIf="this.authService.isAuthenticated;
  then message else loginForm">
</ng-container>

<ng-template #message>
  <div>
    <p>Welcome message...</p>
  </div>
</ng-template>

<ng-template #loginForm>
  <form>...</form>
</ng-template>


// the following DOES NOT work:
<ng-container
  *ngIf="(isAuthenticated$ | async);
  then message else loginForm">
</ng-container>

<ng-template #message>
  <div>
    <p>Welcome message...</p>
  </div>
</ng-template>

<ng-template #loginForm>
  <form>...</form>
</ng-template>


// component.ts
isAuthenticated$ = this.authService.authChanged as Observable<boolean>;


// auth.service.ts
public initiateAuthTracking() { // called in ngOnInit() of app.component.ts

  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.isAuthenticated = Boolean(user);
      this.authChanged.next(true);
    } else {
      this.isAuthenticated = false;
      this.authChanged.next(false);
    }
  });
 }

Answer 1

我相信该代码可以按预期工作。当您通过authChanged.next发出布尔值时，Observable不会完成，因此async管道会获取该值，但等待Observable完成。

尝试在发射后使可观察物完整。

角度（isAuthenticated $ |异步）不能按预期工作

1 个答案: