Как правильно вложить несколько нг-если?

Question

У меня проблема с несколькими вложенными ngIf, примененными к ng-template элементам в Angular.js, и я не могу найти идеальный ответ. Я знаю обходные пути, но они не оптимизированы.

Это код, который я пытаюсь запустить:

<div class="container">
    <ng-template *ngIf="booleanA;then caseA else caseB">
        <ng-template #caseA>
            <el>1</el>
            <el>2</el>
        </ng-template>
        <ng-template #caseB>
            <ng-template *ngIf="booleanB">
                <el>3</el>
                <el>4</el>
                <el>5</el>
            </ng-template>
        </ng-template>
    </ng-template>
</div>

И вот два решения, которые я нашел для моей проблемы:

• Размещение ngIf на каждом дочернем элементе внутри элемента #caseB:

  <ng-template #caseB> <el *ngIf="booleanB">3</el> <el *ngIf="booleanB">4</el> <el *ngIf="booleanB">5</el> </ng-template>

• Размещение окружающего элемента class="container" внутри #caseA и #caseB и применение к нему второго ngIf:

  <ng-template *ngIf="booleanA;then caseA else caseB"> <ng-template #caseA> <div class="container"> <el>1</el> <el>2</el> </div> </ng-template> <ng-template #caseB> <div *ngIf="booleanB" class="container"> <el>3</el> <el>4</el> <el>5</el> </div> </ng-template> </ng-template>

Проблема с этими решениями в оптимизации. Первый проверяет несколько раз одно и то же значение, а второй дважды использует один и тот же элемент html.

Можно ли как-нибудь сделать оригинальный дизайн?

РЕДАКТИРОВАТЬ: два решения не будут отображаться в виде блоков кода, поэтому я разработал их как встроенный код. Если вы знаете, как это исправить, мы будем очень рады.

РЕДАКТИРОВАТЬ 2: Внесение некоторых разъяснений в отношении того, что я ищу: конечная цель не в том, чтобы код работал, я уже нашел обходные пути, которые я мог бы использовать, если ничего не помогло.

Конечная цель - заставить этот код работать только с логическим элементом Angular <ng-template> и следуя оригинальному дизайну; и без с помощью дополнительных нативных элементов, таких как div, которые изменят DOM.

Answer 1

Вы можете попробовать использовать ngSwitch: https://angular.io/api/common/NgSwitch

пример кода из Angular:

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

Answer 2

Я нашел способ сохранить мышление моего первоначального дизайна без добавления ненужных новых элементов DOM, дублирования кода HTML или двойной проверки той же переменной.

<div class="container">
    <ng-template *ngIf="booleanA;then caseA else caseB">
        <ng-template #caseA>
            <el>1</el>
            <el>2</el>
        </ng-template>
        <ng-template #caseB>
            <ng-template *ngIf="booleanB;then caseC"></ng-template>
            <ng-template #caseC>
                <el>3</el>
                <el>4</el>
                <el>5</el>
            </ng-template>
        </ng-template>
    </ng-template>
</div>

Спасибо всем за то, что дали мне другие пути для исследования, они мне хорошо послужат.

Answer 3

Два изменения, которые нужно сделать

1. Использование ng-container
2. Использование div вместо вложенного ng-template

пожалуйста, посмотрите это stackblitz

<div class="container">
    <ng-container *ngIf="booleanA; then caseA; else caseB">
    </ng-container>
    <ng-template #caseA>
        <span>1</span>
        <span>2</span>
    </ng-template>
    <ng-template #caseB>
        <div *ngIf="booleanB">
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </ng-template>
</div>