Come usare * ngIf altro in Angolare?

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:

  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-