angular - 在模板中使用 observable 会导致浏览器冻结

在 component.html 中使用 auth.appUser$ 会导致浏览器卡顿。然而，在 component.ts 中订阅 auth.appUser$ 可以正确地将信息输出到控制台。

请注意，appUser$的类型是：Observable<AppUser>，其中 AppUser 在一个接口中定义，包含字段 name、email 和 isAdmin。

控制台没有输出任何异常。

navbar.component.html：（浏览器在这里冻结！）

<li *ngIf="auth.appUser$ | async as user; else anonymousUser" ngbDropdown class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {{ user.name }}
    </a>
</li>

navbar.component.ts：（浏览器不会冻结！）

export class NavbarComponent implements OnInit {

    constructor(public auth: AuthService) {
        this.auth.appUser$.subscribe(user => console.log(user.name));
    }
}

`auth.appUser$` 是在 auth.service.ts 中定义的一个可观察对象：

export class AuthService {

  user$: Observable<firebase.User>;

constructor(
    private userService: UserService) {
    this.user$ = this.afAuth.authState;
  }

get appUser$(): Observable<AppUser> {
    return this.user$
      .pipe(
        switchMap(user => this.userService.get(user.uid).valueChanges())
      );
  }
}

答案＃1

请尝试将异步用大括号包起来

*ngIf="(auth.appUser$ | async) as user; else anonymousUser"

替代

<ng-container *ngIf="(auth.appUser$ | async) as user; else anonymousUser">
  <li> content... </li>
</ng-container>