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:

1. Basta usare If

    
    If isValid is true  

2. Utilizzo di If with Else (si prega di notare templateName )

    
    If isValid is true 
     If isValid is false  

3. Utilizzo di If with Then (si prega di notare templateName )

    
    Here is never showing 
     If isValid is true  

4. 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 

In Angular 4, 5 e 6

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:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables–var-