Angular AOT 在使用异步管道评估 ngIf 时抛出错误

Question

我有一个带有*ngIf的角度组件，如果用户没有权限或者他们没有任何内容可显示，它会隐藏导航元素。 它首先检查当前加载的用户是否有权限，然后他们是否有任何数据要显示。 该组件看起来像这样（非常简化）：

@Component({...})
export class AuthenticatedHeaderComponent {
  public hasAnalytics$: Observable<boolean> = this.analyticsQuery.hasAnalytics$;
  public hasAccess(controlName: string): boolean {
    return true;
  }

  constructor(private readonly analyticsQuery: AnalyticsQuery) {}
}

使用这样的模板：

<div *ngIf="hasAccess('analytics') && hasAnalytics$ | async">
  <a routerLink="/analytics">Analytics</a>
</div>

当我编译、单元测试并在本地运行它时，一切正常。 但是，当我编译它用于生产时，我收到以下错误：

ERROR in src/app/core/appHeader/authenticatedHeader.component.html(42,9): Argument of type 'false | Observable<boolean>' is not assignable to parameter of type 'Promise<any> | null | undefined'.
  Type 'false' is not assignable to type 'Promise<any> | null | undefined'.

生产也包括 AoT 步骤。

尽管错误表明有承诺，但表达式中没有承诺。 这使得消息相当混乱。 错误指向的字符是*ngIf - 所以它可能与该指令有关？ 什么可以解决这个 AoT 编译错误？

Answer 1

尝试将第二个条件包装在括号中，如下所示：

*ngIf="hasAccess('analytics') && (hasAnalytics$ | async)"