*ngIf else if in template

Lesezeit: 6 Minuten

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?

  • Ich dachte, dass Ihr Hack die beste Lösung war, da es am lesbarsten war. Ich habe jedoch festgestellt, dass eckige Switch-Anweisungen die Übereinstimmung mehrerer Kriterien ermöglichen, sodass Sie diese wahre Elseif-Logik nicht erhalten.

    – Tom Benyon

    14. Mai 2019 um 7:13 Uhr

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>

  • Das war für mich die bessere Lösung. Meine Bedingungen basierten auf mehreren Variablen und mehr als eine konnte gleichzeitig wahr sein.

    – Matt DeKok

    2. Oktober 2017 um 13:42 Uhr

  • Können wir nicht like verwenden <ng-template #second *ngIf="foo === 2;else third">

    – Loki

    26. September 2019 um 15:06 Uhr

  • Beim Verketten von ngIf unterstützt das , das von einem vorherigen else adressiert wird, kein anderes ngIf. Ein verschachteltes -Tag ermöglicht das Einfügen der nächsten Bedingung.

    – Konstantin Konstantinidis

    4. Dezember 2020 um 11:17 Uhr

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

  • Mein Beispiel ist ein wenig simpel, erwartet aber das ‘else if’-Verhalten wie das if (index === 1) else if (foo === 2) was geschrieben werden müsste if (index === 1) if (index !== 1 && foo === 2) Das ist ein bisschen chaotisch und fehleranfälliger, je öfter wir inverse Logik schreiben müssen.

    Benutzer358089

    5. Mai 2017 um 21:13 Uhr

  • Hast du dir den Plunker angeschaut? Ich glaube nicht, dass ich das Problem sehe, Index wird nur 1 Sache auf einmal sein.

    – Dylan

    5. Mai 2017 um 21:37 Uhr


  • Ich denke, es ist mein Beispiel, dem die Erklärung fehlt, 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 */ }

    Benutzer358089

    5. Mai 2017 um 22:30 Uhr


  • Immer noch zu viel gegenseitiger Ausschluss in diesem Beispiel, aber der Punkt ist immer noch, dass ich tun muss, ob, sonst, wenn, und sonst, nicht nur, wenn und sonst, ohne tonnenweise redundante Logik zu schreiben. Es scheint, als ob den Vorlagen von Angular 4 diese Art von Logik fehlt.

    Benutzer358089

    5. Mai 2017 um 22:38 Uhr

  • Es gibt noch ein paar andere Optionen, das klingt so, als könnten Sie von einer profitieren NgTemplateOutlet mit Kontext wie *ngTemplateOutlet=”drink; context: beer” oder vielleicht einer anderen Komponente zur Kategorisierung.

    – Dylan

    5. Mai 2017 um 22:41 Uhr

Benutzer-Avatar
Ziege

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 …

Benutzer-Avatar
Sina Lotfi

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.

Benutzer-Avatar
Nikolaus

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>

1017400cookie-check*ngIf else if in template

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy