*ngIf else if in template

Wie würde ich mehrere Fälle in einem haben *ngIf Aussage? Ich bin es gewohnt, Vue oder Angular 1 mit einem zu haben if, else ifund elseaber es scheint, als hätte Angular 4 nur a true (if) und false (else) Bedingung.

Laut Dokumentation kann ich nur:

<ng-container *ngIf="foo === 1; then first else second"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

Aber ich möchte mehrere Bedingungen haben (so etwas wie):

<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

Aber am Ende muss ich verwenden ngSwitchwas sich wie ein Hack anfühlt:

<ng-container [ngSwitch]="true">
  <div *ngSwitchCase="foo === 1">First</div>
  <div *ngSwitchCase="bar === 2">Second</div>
  <div *ngSwitchDefault>Third</div>
</ng-container>

Alternativ scheinen viele der Syntaxen, an die ich mich von Angular 1 und Vue gewöhnt habe, in Angular 4 nicht unterstützt zu werden. Was wäre also die empfohlene Methode, um meinen Code mit solchen Bedingungen zu strukturieren?

Eine andere Alternative sind Verschachtelungsbedingungen

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

Sie können einfach verwenden:

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

Es sei denn, der ng-Container-Teil ist für Ihr Design wichtig, nehme ich an.

Hier ist ein Plunker

Dies scheint der sauberste Weg zu sein

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

in der Vorlage:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

Beachten Sie, dass es funktioniert wie ein richtiger else if Aussage sollte wenn die Bedingungen unterschiedliche Variablen betreffen (es ist jeweils nur 1 Fall wahr). Einige der anderen Antworten funktionieren in einem solchen Fall nicht richtig.

beiseite: gott eckig, das ist doch mal richtig hässlich else if Vorlagencode …

Sie können je nach Situation mehrere Möglichkeiten verwenden:

1. Wenn Sie Variable auf bestimmte beschränkt ist Nummer oder Schnurder beste Weg ist die Verwendung von ngSwitch oder ngIf:

   <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
   

2. Oben nicht geeignet für wenn sonstwenn sonst Codes und dynamische Codes, Sie können den folgenden Code verwenden:

   <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
   

Hinweis: Sie können jedes Format auswählen, aber beachten Sie, dass jeder Code seine eigenen Probleme hat

Um Verschachtelungen und ngSwitch zu vermeiden, gibt es auch diese Möglichkeit, die sich die Funktionsweise logischer Operatoren in Javascript zunutze macht:

<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Oder verwenden Sie einfach Bedingungsketten mit ternärem Operator. if … else if … else if … else Kette.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container [ngTemplateOutlet]="isFirst ? first : isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

Dieser Ansatz gefällt mir besser.

Sie müssen *ngIf nicht verwenden, wenn Sie ng-container verwenden

<ng-container [ngTemplateOutlet]="myTemplate === 'first' ? first : myTemplate === 
   'second' ? second : third"></ng-container>

  <ng-template #first>first</ng-template>
  <ng-template #second>second</ng-template>
  <ng-template #third>third</ng-template>