Использование синтаксиса @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?

Я думаю, что вам не хватает ";" перед as это должно быть ` @if (buildingList[key][buildingLevel[key]]; as build) {`

Nifiro 31.08.2024 22:57

Вы проверяли документы? angular.dev/api/core/@if Но да, @let тоже чистое решение

ShamPooSham 02.09.2024 10:02
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 — элегантный синтаксис.

Другие вопросы по теме

Похожие вопросы