Wie würde ich mehrere Fälle in einer *ngIf
Erklärung haben? Ich bin zu Vue oder Angular 1 verwenden eine mit mit if
, else if
und 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?
angular
templates
angular-ng-if
Alexander Abakumov
quelle
quelle
Antworten:
Eine andere Alternative sind Nestbedingungen
quelle
<ng-template #second *ngIf="foo === 2;else third">
Sie können einfach verwenden:
es sei denn, der ng-container-teil ist für dein design wichtig, nehme ich an.
Hier ist ein Plunker
quelle
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.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 */ }
NgTemplateOutlet
scheint, als könnten Sie von einem Kontext wie * ngTemplateOutlet = "drink; context: Beer" oder einer anderen Komponente zur Kategorisierung profitieren .Dies scheint der sauberste Weg zu sein
in der Vorlage:
Beachten Sie, dass es wie eine richtige
else if
Anweisung 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 if
Vorlagencode ...quelle
Sie können mehrere Möglichkeiten verwenden, basierend auf der Lösung:
Wenn Sie Variable ist nicht auf bestimmte beschränkte Zahl oder String , bester Weg ist mit ngSwitch oder ngIf:
Oben nicht geeignet, wenn sonst Codes und dynamische Codes, können Sie folgenden Code verwenden:
quelle
*ngIf="foo >= 7; then t7"
statt... else t7
.foo >= 4 && foo <= 6; then t46; else t7
sollten funktionieren.Um Verschachtelung und ngSwitch zu vermeiden, gibt es auch diese Möglichkeit, die die Funktionsweise logischer Operatoren in Javascript nutzt:
quelle
Oder verwenden Sie einfach bedingte Ketten 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
Ich mag diesen Ansatz besser.
quelle
quelle
Sie können diesen alten Trick auch zum Konvertieren komplexer if / then / else-Blöcke in eine etwas sauberere switch-Anweisung verwenden:
quelle