Angular 8 Как реализовать if elseif оператор

Question

Я новичок в Angular 8. Я использую Angular 8. Любая помощь или подсказка будет принята с благодарностью !!

Я пытаюсь реализовать следующий псевдокод:

if (condition1)
{
    print1
}
else if (condition2)
{
    print2
}
else
{
    print3
}

Вот код, который я могу реализовать только if else

<ng-container *ngIf="(5>1);then resultOutOfRange else resultNA;">
</ng-container>
<ng-template #resultOutOfRange>
    <td  class="help-block">Result out of Range </td> 
</ng-template>
<ng-template #resultNA>
    <td>Result N/A</td>
</ng-template>

Answer 1

вариант 1: вложенный ngIf:

<ng-container *ngIf="condition1; then true1 else block2"></ng-container>
<ng-template #true1>true1</ng-template>
<ng-template #block2>
  <ng-container *ngIf="condition2; then true2 else true3"></ng-container>
  <ng-template #true2>true2</ng-template>
  <ng-template #true3>true3</ng-template>
</ng-template>

или, если возможно, альтернативно, используйте ngSwitch:

<div [ngSwitch]="switchCondition">
  <ng-container *ngSwitchCase="case1">true1</ng-container>
  <ng-container *ngSwitchCase="case2">true2</ng-container>
  <ng-container *ngSwitchCase="case3">true3</ng-container>
</div>

ngSwitch работает в тех случаях, когда вам необходимо переключиться на основе определенного значения Вы могли бы работать с вашим кодом, чтобы установить некоторую переменную, основанную на результате каких-либо условий, присваивая switchCondition в вашем блоке else if, например:

if (condition1) {
  this.switchCondition = 'case1'
} else if (condition2) {
  this.switchCondition = 'case2'
} else {
  this.switchCondition = 'case3'
}

, помещайте это в некоторую функцию и вызывайте при необходимости.

Answer 2

Вы ищете if/else блок, а затем еще один if/else, который является вложенным. Нет возможности сложить их, как в javascript, если только у вас нет значения atomi c, в этом случае вы можете использовать ngSwitch, что похоже на оператор switch / case.

<ng-container *ngIf="CONDITION1; else resultNA;">
  <p>Condition 1 is true</p>
</ng-container>

<ng-template #resultNA>
    <ng-container *ngIf="CONDITION 2; else otherBlock;">
        <p>Condition 2 is true</p>
    </ng-container>

    <ng-template #otherBlock>
      <p>No conditions are true</p>
    </ng-template>
</ng-template>

Edit

"Я не могу использовать ngswitch, потому что мои условия на самом деле очень сложные." ...

В этом случае я бы порекомендовал вам воспользоваться тем, что вы иметь код компонента (машинопись). Напишите свою логику c и затем используйте ее в шаблоне HTML, это сделает ваш код более удобным и легким для чтения.

Пример имейте в виду, что вам не нужно этого делать в OnInit это может быть метод, который также вызывается или что-то еще, что изменяется при изменении значения).

component.ts

displayValue: number;
ngOnInit() {
  displayValue = /*your logic here that dictates what it should be*/.
}

. html

<container-element [ngSwitch]="displayValue">
   <some-element *ngSwitchCase="1">...</some-element>
   <some-element *ngSwitchCase="2">...</some-element>
   <some-element *ngSwitchCase="3">...</some-element>

   <some-element *ngSwitchDefault>...</some-element>
</container-element>

См. Также https://angular.io/api/common/NgIf и https://angular.io/api/common/NgSwitch