Angular 18.1.0中如何用@if语法实现*ngIf的as赋值功能？

你当前使用Angular 18.1.0，原代码通过<ng-container *ngIf>的as语法实现变量赋值，写法如下：

<div>
    @for(key of buildingKeys; track $index) {
    <ng-container *ngIf="buildingList[key][buildingLevel[key]] as build">
        <div>Name: {{build.name | i18n}}</div>
    </ng-container>
    }
</div>

尝试改用@if语法时，因写法错误触发Parser Error: Unexpected token 'as' at column 39 in [buildingList[key][buildingLevel[key]] as build]错误。

正确的@if写法 #

Angular的@if语法中，变量赋值需通过分号分隔条件与赋值语句，而非将as嵌入条件表达式内部，正确代码如下：

<div>
    @for(key of buildingKeys; track $index) {
        @if (buildingList[key][buildingLevel[key]]; as build) {
            <div>Name: {{ build.name | i18n }}</div>
        }
    }
</div>

说明 #

这种写法的逻辑与原*ngIf="expr as var"完全一致：

• 先判断buildingList[key][buildingLevel[key]]是否为真值（非null/undefined等）
• 若条件成立，将该值赋值给变量build，并在@if块内使用

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