Angular 17：如何使用新@if语法在对象中处理异步值？

之前用*ngIf时，我们可以把多个异步流通过async管道打包成一个对象，避免重复使用async管道，之后直接复用这个对象。现在想用Angular 17的新@if语法做同样的事，但直接尝试的写法行不通。

旧的*ngIf实现方式 #

<ng-container *ngIf="{
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // 更多异步操作...
} as data">
  <span *ngIf="data.test.length">Show something</span>
</ng-container>

尝试无效的@if写法 #

@if({
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // 这种写法不生效
} as data) {
   <!-- 内容展示 -->
}

可行的正确写法 #

在Angular 17的新控制流语法里，不能直接在@if的条件表达式里同时完成对象声明和异步解析，需要搭配@let语法先打包异步结果：

方式一：先声明变量再判断使用 #

@let data = {
  test: test$ | async,
  anotherOne: anotherOne$ | async
};
@if (data.test && data.anotherOne) {
  <span *ngIf="data.test.length">Show something</span>
}

方式二：直接声明变量后使用（无需强制判断所有结果） #

如果不需要等所有异步结果都返回才渲染，可以直接用可选链处理未加载的情况：

@let data = {
  test: test$ | async,
  anotherOne: anotherOne$ | async
};
<span *ngIf="data.test?.length">Show something</span>

说明 #

• @let是Angular 17新增的模板变量声明语法，能在模板里直接创建变量，完美适配这种打包多个异步结果的场景。
• 这种写法和旧*ngIf实现的效果一致：只会订阅一次每个异步流，避免重复订阅的问题，同时符合新控制流的语法规范。

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