Ik gebruik Angular en ik wil in dit voorbeeld *ngIf else(beschikbaar sinds versie 4) gebruiken:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Hoe kan ik hetzelfde gedrag bereiken met ngIf else?
Antwoord 1, autoriteit 100%
Hoek 4 en 5:
met behulp van else:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
u kunt ook then elsegebruiken:
<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>
of thenalleen :
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Details:
<ng-template>: is Angular’s eigen implementatie van de <template>-tag volgens MDN:
Het HTML
<template>-element is een mechanisme om de client-side
inhoud die niet moet worden weergegeven wanneer een pagina wordt geladen, maar die wel kan
vervolgens worden geïnstantieerd tijdens runtime met behulp van JavaScript.
Antwoord 2, autoriteit 18%
In Angular 4.x.x
U kunt ngIfop vier manieren gebruiken om een eenvoudige procedure te bereiken:
-
Gebruik gewoon If
<div *ngIf="isValid"> If isValid is true </div> -
If with Elsegebruiken (Let op bij templateName)
<div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template> -
Als met Dangebruiken (Let op bij templateName)
<div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template> -
Als met Dan en Anders
. gebruiken
<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>
Tip: ngIfevalueert de expressieen geeft vervolgens de thenof elseweer
sjabloon op zijn plaats wanneer de uitdrukking respectievelijk waarheidsgetrouw of onwaar is.
Typisch de:
- dansjabloon is de inline sjabloon van ngIftenzij gebonden aan een andere waarde.
- elsesjabloon is leeg, tenzij het gebonden is.
Antwoord 3, autoriteit 3%
Om met waarneembaar te werken, is dit wat ik gewoonlijk doe om weer te geven als de waarneembare array uit gegevens bestaat.
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
Antwoord 4, autoriteit 3%
Voor Angular 9/ 8
Bron Linkmet voorbeelden
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 en anders
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, toen en anders
<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>
Antwoord 5
Voeg gewoon nieuwe updates toe vanuit Angular 8.
- Voor het geval dat met else, kunnen we ngIfen ngIfElsegebruiken.
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
- Voor het geval dat met dan kunnen we ngIfen ngIfThengebruiken.
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
- Voor het geval dat met then en else, kunnen we ngIf, ngIfThenen ngIfElsegebruiken.
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
Antwoord 6
Hier is een mooie en duidelijke syntaxis voor Angular’s NgIf en gebruik de else-instructie. Kortom, u declareert een ElementRefvoor een element en verwijst ernaar in het elseblok:
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
Ik heb dit voorbeeld overgenomen van NgIf, Else, Thendat ik echt goed uitgelegd.
Het demonstreert ook het gebruik van de <ng-template>syntaxis:
<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
En ook <ng-container>gebruiken als dat is wat je zoekt:
<ng-container
*ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>
<ng-template #loggedIn>
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
Bron is afkomstig van hier op de NgIf- en Else-syntaxis van Angular.
Antwoord 7
U kunt <ng-container>en <ng-template>gebruiken om dit te bereiken
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>
U kunt de Stackblitz Live-demo hieronder vinden
Hoop dat dit helpt … !!!
Antwoord 8
“bindEmail” het zal controleren of e-mail beschikbaar is of niet. als e-mail bestaat, wordt Uitloggen weergegeven, anders wordt Login weergegeven
<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>
Antwoord 9
De resulterende waarde van de
ngif-expressie is niet alleen de boolean true of false
als de uitdrukking slechts een object is, evalueert het het nog steeds als waarheidsgetrouwheid.
als het object niet gedefinieerd is of niet bestaat, zal ngif het als onwaarheid beoordelen.
gebruikelijk is als een geladen object bestaat, dan de inhoud van dit object weergeven, anders “loading…….” weergeven.
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
een ander voorbeeld:
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 voorbeeld:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
Antwoord 10
Syntaxis voor ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
NgIf / Else/ Then expliciete syntaxis gebruiken
Om een sjabloon toe te voegen, hoeven we het alleen maar expliciet aan een sjabloon te binden.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
Waarnemingen met NgIf en Async Pipe
Antwoord 11
als isShow waar is, voert u de eerste regel uit, anders voert u de tweede regel uit omdat elseBlockShowwerkt als referentievariabele
<div *ngIf="isShow; else elseBlockShow">Text to show for If </div>
<ng-template #elseBlockShow>Text to show for else block</ng-template>
Antwoord 12
In Angular 4.0 is de if..else-syntaxis vrij gelijkaardig aan voorwaardelijke operators in Java.
In Java gebruik je om "condition?stmnt1:stmnt2".
In Angular 4.0 gebruik je *ngIf="condition;then stmnt1 else stmnt2".
Antwoord 13
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
Antwoord 14
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
Antwoord 15
Er zijn twee mogelijkheden om te gebruiken als voorwaarde op HTML-tag of sjablonen:
- *ngIf-richtlijn van CommonModule, op HTML-tag;
- als-anders
Antwoord 16
<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>
Antwoord 17
In Angular 4, 5 en 6
We kunnen eenvoudig een sjabloonreferentievariabele[2]maken en die koppelen aan de else-voorwaarde in een *ngIf-richtlijn
De mogelijke Syntaxis[1]zijn:
<!-- 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
Bronnen:
- https://angular.io/api/common/NgIf#syntax
- https://angular.io/guide/template -syntax#template-reference-variables–var-
Antwoord 18
U kunt ook Javascript korte ternaire voorwaardelijke operator gebruiken? in hoekig zoals dit:
{{doThis() ? 'foo' : 'bar'}}
of
<div [ngClass]="doThis() ? 'foo' : 'bar'">
Antwoord 19
Ik weet dat dit een tijdje geleden is, maar ik wil het toevoegen als het helpt. De manier waarop ik te werk ging, is om twee vlaggen in de component te hebben en twee ngIf’s voor de overeenkomstige twee vlaggen.
Het was eenvoudig en werkte goed met materiaal omdat ng-sjabloon en materiaal niet goed samenwerkten.