Ich verwende Angular und möchte in diesem Beispiel *ngIf else
(verfügbar seit Version 4) verwenden:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Wie kann ich mit ngIf else
dasselbe Verhalten erreichen?
Winkel 4 und 5:
mit else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
sie können auch then else
verwenden:
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
oder then
alleine:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Einzelheiten:
<ng-template>
: ist die eigene Implementierung des <template>
-Tags von Angular. Dies entspricht MDN :
Das HTML
<template>
-Element ist ein Mechanismus zum Halten von clientseitigen Inhalt, der beim Laden einer Seite nicht gerendert werden soll, kann jedoch anschließend zur Laufzeit mit JavaScript instanziiert werden.
In Angular 4.x.x Sie können ngIf auf vier Arten verwenden, um ein einfaches if else-Verfahren zu erreichen:
Verwenden Sie einfach If
<div *ngIf="isValid">
If isValid is true
</div>
Verwenden von If mit Else (Bitte beachten Sie templateName)
<div *ngIf="isValid; else templateName">
If isValid is true
</div>
<ng-template #templateName>
If isValid is false
</ng-template>
Verwenden von If with Then (Bitte beachten Sie templateName)
<div *ngIf="isValid; then templateName">
Here is never showing
</div>
<ng-template #templateName>
If isValid is true
</ng-template>
Verwenden von If mit Then und Else
<div *ngIf="isValid; then thenTemplateName else elseTemplateName">
Here is never showing
</div>
<ng-template #thenTemplateName>
If isValid is true
</ng-template>
<ng-template #elseTemplateName>
If isValid is false
</ng-template>
Tipp: ngIf wertet den Ausdruck aus und rendert dann das dann oder else Schablone an seiner Stelle, wenn der Ausdruck wahr oder falsch ist . Normalerweise die:
- then template ist das Inline-Template von ngIf, sofern es nicht an einen anderen Wert gebunden ist.
- Die Vorlage else ist leer, sofern sie nicht gebunden ist.
Um mit Observable zu arbeiten, mache ich das normalerweise, wenn das Observable Array aus Daten besteht.
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
"bindEmail" überprüft, ob E-Mails verfügbar sind oder nicht. Wenn eine E-Mail vorhanden ist, wird Logout angezeigt, ansonsten wird Login angezeigt
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
In Angular 4.0 ist if..else
die Syntax den bedingten Operatoren in Java sehr ähnlich.
In Java verwenden Sie "condition?stmnt1:stmnt2"
.
In Angular 4.0 verwenden Sie *ngIf="condition;then stmnt1 else stmnt2"
.
der Ergebniswert eines ngif-Ausdrucks ist nicht einfach das boolesche true oder false
wenn der Ausdruck nur ein Objekt ist, wird er immer noch als Wahrhaftigkeit bewertet.
wenn das Objekt nicht definiert ist oder nicht existiert, wird es von ngif als falsch bewertet.
die übliche Verwendung ist, wenn ein Objekt geladen ist, vorhanden ist und der Inhalt dieses Objekts angezeigt wird. Andernfalls wird "loading ......."
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
ein anderes Beispiel:
things = {
car: 'Honda',
shoes: 'Nike',
shirt: 'Tom Ford',
watch: 'Timex'
};
<div *ngIf="things.car; else noCar">
Nice car!
</div>
<ng-template #noCar>
Call a Uber.
</ng-template>
<!-- Nice car ! -->
anthoer Beispiel:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
Um dann die Vorlage hinzuzufügen, müssen wir sie nur explizit an eine Vorlage binden.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
Für Winkel 8
Quelle Link mit Beispielen
export class AppComponent {
isDone = true;
}
1) * ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) * ngIf and Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) * ngIf, Then and Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
Wir können einfach eine Vorlagenreferenzvariable erstellen. [2] und verknüpfen Sie diese mit der else-Bedingung in einer * ngIf-Direktive
Die möglichen Syntaxes [1] sind:
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>
DEMO:https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
Quellen:
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
Sie können auch Javascript verwenden, kurzer ternärer bedingter Operator? im eckigen so:
{{doThis() ? 'foo' : 'bar'}}
oder
<div [ngClass]="doThis() ? 'foo' : 'bar'">
Ich weiß, dass das schon eine Weile her ist, aber ich möchte es hinzufügen, wenn es hilft. Ich habe mit zwei Flags in der Komponente und zwei NgIfs für die entsprechenden zwei Flags gearbeitet.
Es war einfach und funktionierte gut mit Material, da ng-template und Material nicht gut zusammenarbeiteten.
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>