Angular 17中@if控制流结合async管道定义变量的报错解决方法

问题场景 #

原有基于*ngIf的异步数据渲染代码：

<div *ngIf="post$ | async as post">
  <h1>{{ post.attributes.title }}</h1>
</div>

其中post$的类型为Observable<ContentFile<BlogPost | Record<string, never>>>。

尝试改用Angular 16新的内置控制流语法时，写出如下代码：

@if(post$|async as post) {

}

触发解析错误：

Parser Error: Unexpected token 'as' at column 13 in [post$|async as post] in ...

解决方法 #

Angular新内置控制流的@if语法中，不能直接使用as来接收async管道的输出，需要改用分号;分隔条件与变量声明，通过let关键字赋值变量。

正确的写法如下：

@if (post$ | async; let post) {
  <h1>{{ post.attributes.title }}</h1>
}

这种语法是新控制流的标准写法，通过分号区分条件判断和变量绑定逻辑，let post会接收post$ | async的最终值，功能上和原*ngIf="post$ | async as post"完全一致。

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