Comment utiliser * ngIf autrement?


631

J'utilise Angular et je veux utiliser *ngIf else(disponible depuis la version 4) dans cet exemple:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

Comment puis-je obtenir le même comportement avec ngIf else?


1
Vérifiez ici pour Angular 8 expliqué avec l'exemple NgIf, NgIf Else et NgIf Then Else freakyjolly.com/…
Code Spy

Réponses:


982

Angulaire 4 et 5 :

utilisant else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

vous pouvez également utiliser 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>

ou thenseul:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Démo:

Plunker

Détails:

<ng-template>: est la propre implémentation angulaire de la <template>balise qui est conforme à MDN :

L' <template>élément HTML est un mécanisme permettant de conserver du contenu côté client qui ne doit pas être rendu lorsqu'une page est chargée, mais qui peut ensuite être instancié lors de l'exécution à l'aide de JavaScript.


8
J'espérais qu'il y avait un moyen d'utiliser <ng-template> sans une autre balise comme div, mais bizarrement ce n'est pas ... Je sais que <div> est supprimé lorsque vous l'utilisez, mais c'est un peu bizarre comme implémentation je pense.
andreas

20
@andreas Vous pouvez utiliser <ng-container>pour la clause if
Martin Schneider

2
Remarque: vous pouvez utiliser ng-containerpour le conteneur contenant * ngIf, mais pas pour le modèle
Simon_Weaver

@Simon_Weaver Je l'ai compris à la dure. Mais pourquoi? pourquoi n'ont-ils pas permis *ngIf de travailler ng-template?
Eran Medan

<div * ngIf = "isValid; then content else other_content"> ici est ignoré </div> il n'est pas ignoré. c'est l'endroit pour injecter le ng-template
dimson d

185

Dans Angular 4.xx, vous pouvez utiliser ngIf de quatre manières pour réaliser une procédure simple if else:

  1. Utilisez simplement If

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. Utiliser If avec Else (veuillez noter à templateName )

    <div *ngIf="isValid; else templateName">
        If isValid is true
    </div>
    
    <ng-template #templateName>
        If isValid is false
    </ng-template>
    
  3. Utiliser If avec Then (veuillez noter à templateName )

    <div *ngIf="isValid; then templateName">
        Here is never showing
    </div>
    
    <ng-template #templateName>
        If isValid is true
    </ng-template>
    
  4. Utilisation de If avec Then et Else

    <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
        Here is never showing
    </div>
    
    <ng-template #thenTemplateName>
        If isValid is true
    </ng-template>
    
    <ng-template #elseTemplateName>
        If isValid is false
    </ng-template>
    

Conseil: ngIf évalue l' expression , puis rend le modèle then ou else à sa place lorsque l'expression est respectivement véridique ou fausse. Généralement:

  • alors le modèle est le modèle en ligne de ngIf sauf s'il est lié à une valeur différente.
  • sinon le modèle est vide sauf s'il est lié.

Il semble que le compilateur n'accepte pas ...; else .... Probablement le ;devrait être supprimé.
slartidan

5
dans angular-6, j'ai testé avec ...; else ...et cela a fonctionné
WasiF

20

Pour travailler avec observable, c'est ce que je fais habituellement pour afficher si le tableau observable est constitué de données.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

8

"bindEmail" il vérifiera que le courrier électronique est disponible ou non. si un e-mail existe, la déconnexion s'affiche, sinon la connexion s'affiche

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

2
Ça ne marche pas. S'il était correct, il n'ajouterait toujours aucune valeur car la réponse acceptée montre déjà comment le faire.
Günter Zöchbauer

8

Vous pouvez utiliser <ng-container>et <ng-template>pour y parvenir

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

Vous pouvez trouver la démo Stackblitz Live ci-dessous

démo en direct

J'espère que cela vous aidera ... !!!


8

Pour angulaire 9/8

Lien source avec des exemples

    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 et autres

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Then and Else

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

1
Cela ne fait que répéter ce que la réponse acceptée a déjà déclaré
phil294

6

Syntaxe pour ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

entrez la description de l'image ici

Utilisation de la syntaxe explicite NgIf / Else / Then

Pour ajouter ensuite un modèle, il suffit de le lier explicitement à un modèle.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

entrez la description de l'image ici

Observables avec NgIf et Async Pipe

Pour plus de détails

entrez la description de l'image ici


6

Ajoutez simplement de nouvelles mises à jour depuis Angular 8.

  1. Par exemple, si avec autre, nous pouvons utiliser ngIf et ngIfElse .
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>
  1. Par exemple, si avec alors, nous pouvons utiliser ngIf et ngIfThen .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
  1. Par exemple, si avec then et else, nous pouvons utiliser ngIf , ngIfThen et ngIfElse .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

Génial! Nous sommes récemment passés au 8 angulaire
Islam Murtazaev


5

expression ngif valeur résultante ne sera pas seulement le booléen vrai ou faux

si l'expression n'est qu'un objet, elle l'évalue toujours comme véracité.

si l'objet n'est pas défini, ou n'existe pas, alors ngif l'évaluera comme faux.

l'usage courant est si un objet est chargé, existe, puis affiche le contenu de cet objet, sinon affiche "loading .......".

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

un autre exemple:

  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 ! -->

exemple d'anthoer:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

modèle ngif

ngif angulaire 4


5

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

3

Il y a deux possibilités à utiliser si condition sur une balise HTML ou des modèles:

  1. * Directive ngIf de CommonModule, sur la balise HTML;
  2. sinon

entrez la description de l'image ici


1
<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>

1

En angulaire 4, 5 et 6

Nous pouvons simplement créer une variable de référence de modèle [2] et la lier à la condition else dans une directive * ngIf

Les syntaxes possibles [1] sont:

<!-- 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

Sources:

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

1

Vous pouvez également utiliser l'opérateur conditionnel ternaire court Javascript? en angulaire comme ceci:

{{doThis() ? 'foo' : 'bar'}}

ou

<div [ngClass]="doThis() ? 'foo' : 'bar'">

0

Je sais que cela fait un moment, mais je veux l'ajouter si cela peut aider. La façon dont j'ai procédé est d'avoir deux drapeaux dans le composant et deux ngIfs pour les deux drapeaux correspondants.

C'était simple et fonctionnait bien avec le matériel car le modèle ng et le matériel ne fonctionnaient pas bien ensemble.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.