如何将ngIf as语法与&&运算符结合使用解决语法报错

Angular *ngIf 指令的as语法要求必须绑定到整个*ngIf表达式的最终求值结果，不能仅作用于子表达式。你当前的写法把as userError放在括号内的子表达式中，和后面的&& submitted逻辑运算符结合时不符合Angular的模板语法规则，因此会抛出标识符错误。

方案1：调整表达式顺序（推荐，最简洁） #

把submitted判断放在表达式最前面，as关键字放在整个表达式末尾即可：

<control-error *ngIf="submitted && (createUserError | async) as userError">
  {{userError}}
</control-error>

该写法的执行逻辑为：

• 先判断submitted是否为真值
• 若为真，再求值createUserError | async异步流的结果
• 只有两个条件都为真值时才渲染<control-error>组件，同时将异步流的结果赋值给模板变量userError使用

方案2：用ng-container拆分逻辑 #

如果你需要在多处复用userError变量，或者逻辑优先级需要先判断错误流再判断提交状态，可以用无渲染的<ng-container>拆分两层ngIf：

<ng-container *ngIf="createUserError | async as userError">
  <control-error *ngIf="submitted">
    {{userError}}
  </control-error>
</ng-container>

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