Am'm folosind Unghiulare și vreau să folosesc *ngIf altceva
(disponibilă începând cu versiunea 4) în acest exemplu:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Cum pot realiza același comportament cu ngIf altcineva ?
Unghiulară de 4 si 5:
folosind "altceva":
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
puteți folosi, de asemenea, atunci altcineva :
<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>
sau "și apoi" singur :
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
[Plunker][1]
Detalii:
<ng-șablon>
: este Unghiulare proprii de aplicare a <model>
tag-ul, care este potrivit [MDN][2] :
HTML `
element este un mecanism pentru organizarea client-side conținut care nu este de a fi redat atunci când o pagină este încărcată, dar poate ulterior a fi instanțiată în execuție folosind JavaScript.
În Unghiulare 4.x.x Puteți utiliza ngIf în patru modalitate de a realiza simplu, dacă altceva procedura:
<div *ngIf="isValid"> Dacă isValid este adevărat
<div *ngIf="isValid; altfel templateName"> Dacă isValid este adevărat
<ng-șablon #templateName> Dacă isValid este fals </ng-șablon>
<div *ngIf="isValid; apoi templateName"> Aici nu este niciodată arată
<ng-șablon #templateName> Dacă isValid este adevărat </ng-șablon>
<div *ngIf="isValid; apoi thenTemplateName altceva elseTemplateName"> Aici nu este niciodată arată
<ng-șablon #thenTemplateName> Dacă isValid este adevărat </ng-șablon>
<ng-șablon #elseTemplateName> Dacă isValid este fals </ng-șablon>
Sfat: ngIf evaluează expresie și apoi redă apoi sau altceva șablon în locul său atunci când expresia este sinceră sau falsy respectiv. de Obicei:
- apoi șablon este inline șablon de ngIf cu excepția cazului legat la o valoare diferită.
- *altceva *** șablon este gol, cu excepția cazului în care este legat.
Pentru a lucra cu observabil, asta este ceea ce fac de obicei pentru a afișa dacă observabil matrice este format din date.
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
"bindEmail" se va verifica e-mail este disponibil sau nu. dacă e-mail este există decât Deconectare va arăta altfel de Conectare va arăta
<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>
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
Pentru a adăuga apoi șablon trebuie doar să-l lega la un șablon în mod explicit.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
ngif exprimare valoare rezultată nu va fi doar booleană true sau false
dacă expresia este doar un obiect, ea încă-l evalueze ca truthiness.
dacă obiectul este nedefinit, sau non-exista, atunci ngif va evalua fel de falsitate.
comună utilizare este în cazul în care un obiect încărcat, există, apoi a afișa conținutul acestui obiect, altfel afișa "de încărcare.......".
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
un alt exemplu:
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 exemplu:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
În Unghiulare 4.0 `if..else sintaxa este destul de similar cu condiționate operatorii în Java.
În Java utilizați la "stare?stmnt1:stmnt2"
.
În Unghiulare 4.0 utilizați *ngIf="condiție;apoi stmnt1 altceva stmnt2"
.
Pentru Unghiulară 8
Sursa Link cu Exemple
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 și Altceva**
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
*3) ngIf, Apoi și Altceva**
<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>
Puteți Folosi
<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>
Puteți găsi Stackblitz Live demo-ul de mai jos
Sper că Acest lucru va va ajuta ... !!!
<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>
Știu că a fost un timp, dar doriți să-l adăugați, dacă-l ajută. Modul în care am mers cu este de a avea două steaguri in componenta si doi ngIfs pentru corespunzătoare a două steaguri.
A fost simplu și a lucrat bine cu material ca ng-șablon și materiale nu au fost de lucru bine împreună.
Putem pur și simplu a crea un șablon de referință variabilă [2] și link-ul care la altceva stare interior o *ngIf directiva
Posibile Sintaxe [1] sunt:
<!-- 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
Surse: