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

Question

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

@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)"

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

Angular AOT throws error evaluating an ngIf with an async pipe

angular-template

angular