* ngWenn sonst in der Vorlage

Wie würde ich mehrere Fälle in einer *ngIfErklärung haben? Ich bin zu Vue oder Angular 1 verwenden eine mit mit if, else ifund else, aber es scheint wie Angular 4 hat nur einen true( if) und false( else) Zustand.

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 ngSwitch, was 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 unter solchen Bedingungen zu strukturieren?

Eine andere Alternative sind Nestbedingungen

<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 dein 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 wie eine richtige else ifAnweisung funktioniert, wenn die Bedingungen unterschiedliche Variablen beinhalten (es ist jeweils nur ein Fall wahr). Einige der anderen Antworten funktionieren in einem solchen Fall nicht richtig.

beiseite: Meine Güte eckig, das ist ein wirklich hässlicher else ifVorlagencode ...

Sie können mehrere Möglichkeiten verwenden, basierend auf der Lösung:

1. Wenn Sie Variable ist nicht auf bestimmte beschränkte Zahl oder String , bester Weg ist mit 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, wenn sonst Codes und dynamische Codes, können Sie 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 ein beliebiges Format auswählen. Beachten Sie jedoch, dass jeder Code seine eigenen Probleme hat

Um Verschachtelung und ngSwitch zu vermeiden, gibt es auch diese Möglichkeit, die die Funktionsweise logischer Operatoren in Javascript nutzt:

<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 bedingte Ketten mit ternärem Operator. if … else if … else if … elseKette.

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

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

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

Ich mag diesen Ansatz besser.

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

Angular verwendet ng-template bereits unter der Haube in vielen der Strukturanweisungen, die wir ständig verwenden: ngIf, ngFor und ngSwitch.

> Was ist ng-template in Angular?

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

Sie können diesen alten Trick auch zum Konvertieren komplexer if / then / else-Blöcke in eine etwas sauberere switch-Anweisung verwenden:

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>