Angular 17模板中如何声明新变量别名？

在Angular 17的@if新语法中，确实不能像旧版*ngIf那样直接用空格加as声明变量，你可以通过以下两种方式实现原有逻辑：

方式一：使用@let模板变量（兼容所有Angular 17版本） #

先通过@let将异步流的结果赋值给变量，再用@if判断变量是否存在：

@let list = objectlist$ | async;
@if (list) {
  {{ list.name }}
}

这种写法的优势是变量list可以在@if之外的模板区域复用（如果需要的话）。

方式二：@if内置变量声明（Angular 17.1+ 支持） #

如果你的项目使用Angular 17.1及以上版本，可以用分号分隔条件和变量声明，实现和旧版几乎一致的局部作用域效果：

@if (objectlist$ | async; as list) {
  {{ list.name }}
}

这里的list变量仅在@if的代码块内部生效，和旧版*ngIf的作用域规则一致。

两种写法都能完成异步订阅、变量别名以及空值判断的原有逻辑，你可以根据项目版本和作用域需求选择。

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