Использование синтаксиса @if

Я использую Angular 18.1.0 со следующим синтаксисом:

<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>

Это прекрасно работает, мне просто не хочется использовать синтаксис <ng-container *ngIf = "...">.

Я пытался добиться этого, используя @if, однако синтаксис:

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

Выдает мне следующую ошибку:

Ошибка синтаксического анализатора: неожиданный токен «как» в столбце 39 в [buildingList[key][buildingLevel[key]] as build]

Мой вопрос: есть ли способ добиться этого, используя синтаксис @if?

🤔 А знаете ли вы, что...
Angular - это открытый исходный код фреймворк для разработки веб-приложений, написанный на языке TypeScript.


65
1

Ответ:

Решено

Если у вас версия 18.1+, используйте @let вот так:

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

См. https://angular.dev/api/core/@let

Примечание: @if ... ; as ... тоже должно работать. Но @let — элегантный синтаксис.


Интересные вопросы для изучения