Angular迁移ESLint后Async pipes should not be negated报错处理咨询

你碰到的报错提示里的false | null | undefined是TypeScript类型标注风格的示意写法，仅用来表示需要匹配这三种假值场景，并不是可以直接复制到模板运行的代码，这个提示本身存在表述误导，不是你操作有误。

规则的核心逻辑 #

Angular的async管道在Observable发射值或者Promise resolve前，会默认返回null。如果你直接写!(myObs$ | async)这类否定判断，会出现两个问题：

• 初始阶段!null的结果是true，否定分支会先渲染，等异步返回真值后分支销毁，出现不必要的布局抖动
• 如果否定分支里有初始化请求这类逻辑，会被额外触发一次，带来不必要的性能开销
  这也是这条ESLint规则存在的原因。

正确的替代写法 #

1. 最通用的简洁写法（无需区分加载中和返回假值） #

用*ngIf的else语法匹配所有否定场景，完全等效你原来的否定判断逻辑，也不需要重复写判断条件：

<ng-container *ngIf="(observable | async) as value; else negatedBlock">
  <!-- 异步返回真值时的展示内容 -->
</ng-container>
<ng-template #negatedBlock>
  <!-- 原否定判断`!(observable | async)`对应的展示内容，自动覆盖null/undefined/false三种场景 -->
</ng-template>

2. 需要区分不同假值的写法 #

如果你的业务逻辑需要单独区分「异步加载中（返回null）」和「异步返回false/undefined」的场景，直接显式写全等判断即可：

<!-- 仅异步返回false时展示 -->
<div *ngIf="(observable | async) === false">操作失败</div>
<!-- 仅异步加载中展示 -->
<div *ngIf="(observable | async) === null">加载中...</div>

你之前写的(observable | async) === false || (observable | async) === undefined本身是符合规则要求的，只是重复调用了两次async管道，用上面的别名或者else分支写法优化可读性即可。

内容的提问来源于stack exchange，提问作者Arnaud Denoyelle