Jeg bruker Angular og ønsker å bruke *ngIf else
(tilgjengelig siden versjon 4) i dette eksempelet:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Hvordan kan jeg oppnå samme oppførsel med ngIf else
?
Vinkel 4 og 5:
ved bruk av else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
kan du også bruke then else
:
<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>
eller then
alene:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
[Plunker][1]
Detaljer:
<ng-template>
: er Angular sin egen implementering av <template>
taggen som er i henhold til [MDN][2]:
HTML
<template>
-elementet er en mekanisme for å holde klient-side innhold som ikke skal gjengis når en side lastes inn, men som deretter kan senere kan instansieres under kjøring ved hjelp av JavaScript.
"bindEmail" det vil sjekke om e-post er tilgjengelig eller ikke. hvis e-post finnes, vises Logout, ellers vises Login.
<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>
I Angular 4.0 if..else
syntaks er ganske lik betingede operatorer i Java.
I Java bruker du "condition?stmnt1:stmnt2"
.
I Angular 4.0 bruker du *ngIf="condition;then stmnt1 else stmnt2"
.