* ngWenn sonst in der Vorlage

100

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?

Alexander Abakumov
quelle
Ich dachte, dass Sie Hack die beste Lösung war, da es am besten lesbar war. Ich habe jedoch festgestellt, dass Winkelwechselanweisungen die Übereinstimmung mehrerer Kriterien ermöglichen, sodass Sie diese echte elseif-Logik nicht erhalten.
Tom Benyon

Antworten:

143

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>
CornelC
quelle
4
Dies war die bessere Lösung für mich. Meine Bedingungen basierten auf mehreren Variablen und mehr als eine konnte gleichzeitig wahr sein.
Matt DeKok
1
Können wir nicht wie verwenden<ng-template #second *ngIf="foo === 2;else third">
Loki
klug. sollte in das Framework eingeführt werden tbh
Pogrindis
36

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

Dylan
quelle
1
Mein Beispiel ist ein wenig simpel, aber if (index === 1) else if (foo === 2)ich erwarte das "else if" -Verhalten, das so geschrieben werden muss, if (index === 1) if (index !== 1 && foo === 2)dass es etwas chaotisch und fehleranfälliger ist, je öfter wir inverse Logik schreiben müssen.
Hast du dir den Plunker angesehen? Ich glaube nicht, dass ich das Problem sehe, der Index wird immer nur eine Sache sein.
Dylan
Ich denke, es ist mein Beispiel, das nicht erklärt werden kann. Hier ist ein Beispiel in JS: if (item === 'food' && kind === 'hamburger') {} else if (item === 'food' && kind === 'hotdog') {} else if (item === 'drink' && kind === 'beer') {} else if (item === 'drink' && kind === 'wine') {} else { /* could be poisonous */ }
1
Immer noch zu viel gegenseitiger Ausschluss in diesem Beispiel, aber dennoch muss ich tun, ob, sonst wenn und sonst, nicht nur wenn und sonst, ohne Tonnen redundanter Logik zu schreiben. Es scheint, als ob den Vorlagen von Angular 4 diese Art von Logik fehlt.
1
Es gibt noch einige andere Optionen. Dies NgTemplateOutletscheint, als könnten Sie von einem Kontext wie * ngTemplateOutlet = "drink; context: Beer" oder einer anderen Komponente zur Kategorisierung profitieren .
Dylan
26

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 ...

Ziege
quelle
17

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

Sina Lotfi
quelle
1
IMO sollte 2. lesen *ngIf="foo >= 7; then t7"statt ... else t7.
Hgoebl
Ich denke, nur zwei Zeilen mit der zweiten foo >= 4 && foo <= 6; then t46; else t7sollten funktionieren.
Wolke
4

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>
Max21
quelle
2

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.

Gerald Hughes
quelle
0

<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/

Supriya
quelle
0

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>
Michael Payne
quelle