Ich verwende Angular und möchte *ngIf else
(verfügbar seit Version 4) in diesem Beispiel verwenden:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Wie kann ich das gleiche Verhalten erreichen ngIf else
?
angular
if-statement
angular-template
kawli norman
quelle
quelle
Antworten:
Winkel 4 und 5 :
mit
else
:Sie können auch verwenden
then else
:oder
then
alleine:Demo:
Plunker
Einzelheiten:
<ng-template>
: ist Angulars eigene Implementierung des<template>
Tags gemäß MDN :quelle
<ng-container>
für die if-Klausel verwendenng-container
für den Container verwenden, der * ngIf enthält, aber nicht für die Vorlage*ngIf
daran arbeitenng-template
?In Angular 4.xx können Sie ngIf auf vier Arten verwenden , um ein einfaches if else-Verfahren zu erreichen:
Verwenden Sie einfach If
Verwenden von If with Else (Bitte beachten Sie templateName )
Verwenden von If with Then (Bitte beachten Sie templateName )
Verwenden von If with Then und Else
quelle
...; else ...
. Wahrscheinlich;
sollte das entfernt werden....; else ...
Um mit Observable zu arbeiten, mache ich das normalerweise, um anzuzeigen, ob das Observable-Array aus Daten besteht.
quelle
"bindEmail" prüft, ob E-Mails verfügbar sind oder nicht. Wenn eine E-Mail vorhanden ist, wird Logout angezeigt, andernfalls wird Login angezeigt
quelle
Sie können dies verwenden
<ng-container>
und<ng-template>
erreichenDie Stackblitz Live-Demo finden Sie unten
Live-Demo
Hoffe das wird helfen ... !!!
quelle
Für Angular 9/8
Quelle Verbindung mit den Beispielen
1) * ngIf
2) * ngIf und Else
3) * ngIf, Then and Else
quelle
Syntax für ngIf / Else
Verwenden der expliziten Syntax NgIf / Else / Then
Um diese Vorlage hinzuzufügen, müssen wir sie nur explizit an eine Vorlage binden.
Observables mit NgIf und Async Pipe
Für mehr Details
quelle
Fügen Sie einfach neue Updates von Angular 8 hinzu.
quelle
In Angular 4.0
if..else
ähnelt die Syntax den bedingten Operatoren in Java.In Java verwenden Sie zu
"condition?stmnt1:stmnt2"
.In Angular 4.0 verwenden Sie
*ngIf="condition;then stmnt1 else stmnt2"
.quelle
Der resultierende Wert des ngif-Ausdrucks ist nicht nur der boolesche Wert true oder false
Wenn der Ausdruck nur ein Objekt ist, bewertet er ihn dennoch als Wahrhaftigkeit.
Wenn das Objekt undefiniert oder nicht vorhanden ist, bewertet ngif es als Falschheit.
Häufig wird verwendet, wenn ein geladenes Objekt vorhanden ist, der Inhalt dieses Objekts angezeigt wird, andernfalls wird "Laden ......." angezeigt.
ein anderes Beispiel:
Anthoer Beispiel:
ngif Vorlage
ngif eckig 4
quelle
ng-template
quelle
Es gibt zwei Möglichkeiten, wenn eine Bedingung für ein HTML-Tag oder Vorlagen vorliegt:
quelle
quelle
In Winkel 4, 5 und 6
Wir können einfach eine Vorlagenreferenzvariable [2] erstellen und diese mit der else-Bedingung in einer * ngIf-Direktive verknüpfen
Die möglichen Syntaxen [1] sind:
DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
Quellen:
quelle
Sie können auch Javascript Short Ternary Conditional Operator verwenden? in eckigen wie folgt:
oder
quelle
Ich weiß, dass dies eine Weile her ist, möchte es aber hinzufügen, wenn es hilft. Ich habe zwei Flags in der Komponente und zwei ngIfs für die entsprechenden zwei Flags.
Es war einfach und funktionierte gut mit Material, da ng-template und Material nicht gut zusammenarbeiteten.
quelle