Sto usando Angular e voglio usare *ngIf else
(disponibile dalla versione 4) in questo esempio:
content here ... other content here...
Come posso ottenere lo stesso comportamento con ngIf else
?
Angolare 4 e 5 :
usando else
:
content here ... other content here...
puoi anche usare then else
:
here is ignored content here... other content here...
o then
da solo:
content here...
Demo:
Plunker
Dettagli:
: è l’implementazione di Angular del tag che è secondo MDN :
L’elemento
HTML è un meccanismo per mantenere il contenuto lato client che non deve essere sottoposto a rendering quando viene caricata una pagina, ma può essere successivamente istanziato durante il runtime utilizzando JavaScript.
In Angular 4.xx è ansible utilizzare ngIf in quattro modi per ottenere una semplice procedura if else:
Basta usare If
If isValid is true
Utilizzo di If with Else (si prega di notare templateName )
If isValid is true If isValid is false
Utilizzo di If with Then (si prega di notare templateName )
Here is never showing If isValid is true
Usando If with Then and Else
Here is never showing If isValid is true If isValid is false
Suggerimento: ngIf valuta l’ espressione e quindi restituisce il modello then o else al suo posto quando l’espressione è rispettivamente true o false. In genere:
- quindi template è il modello inline di ngIf a meno che non sia associato a un valore diverso.
- altrimenti il modello è vuoto a meno che non sia vincolato.
Per lavorare con osservabile, questo è quello che faccio di solito per visualizzare se l’array osservabile è costituito da dati.
.... ...
“bindEmail” controllerà che l’e-mail sia disponibile o meno. se l’e-mail è esistente, il logout mostrerà che il login verrà mostrato
Logout Login
In Angular 4.0 la syntax if..else
è abbastanza simile agli operatori condizionali in Java.
In Java si utilizza "condition?stmnt1:stmnt2"
.
In Angular 4.0 si usa *ngIf="condition;then stmnt1 else stmnt2"
.
l’espressione ngif risultante non sarà solo il valore booleano vero o falso
se l’espressione è solo un object, la valuta ancora come verità.
se l’object non è definito, o non esiste, allora ngif lo valuterà come falsità.
l’uso comune è se un object è caricato, esiste, quindi visualizza il contenuto di questo object, altrimenti visualizza “caricamento in corso …….”.
Still loading........... object.info, object.id, object.name ... etc.
un altro esempio:
things = { car: 'Honda', shoes: 'Nike', shirt: 'Tom Ford', watch: 'Timex' }; Nice car! Call a Uber.
esempio di anthoer:
Nice {{ car }}!
modello ngif
ngif angular 4
Connected Disconnected
Possiamo semplicemente creare una variabile di riferimento modello [2] e collegarla alla condizione else all’interno di una direttiva * ngIf
Le possibili syntax [1] sono:
... ... ... ... ... ... {{value}} ...
DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
fonti: