在模板中使用 observable 会冻结浏览器

Question

在 component.html 中使用 auth.appUser$ 会导致浏览器冻结。但是，在component.ts中订阅auth.appUser$会正确地将信息输出到控制台。

请注意，appUser$ 的类型为：Observable<AppUser>，其中 AppUser 是在具有字段名称、电子邮件和 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 中定义的 observable：

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

Answer 1

请尝试扭曲大括号中的异步

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

另类

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