web-dev-qa-db-fra.com

Quelle est la difference entre ng-if et * ng-if in angular2

J'essaie de comprendre la différence entre ng-if et * ng-if, mais ils me ressemblent.

Y a-t-il une différence que je devrais garder à l'esprit en choisissant l'une plutôt que l'autre et quand utiliser ces directives?

javascriptangularangular-ng-if
17
ShellZero

ngIf est la directive. Comme il s’agit d’une directive structurelle (basée sur un modèle), vous devez utiliser le préfixe * pour l’utiliser dans des modèles.

*ngIf correspond au raccourci pour la syntaxe suivante ("sucre syntaxique"):

<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Équivalent à:

<p *ngIf="condition">
  Our heroes are true!
</p>

Voir cette doc pour plus de détails:

21
Thierry Templier

La différence est que les deux versions ne sont pas prises en charge dans Angular2 ;-), du moins dans les versions actuelles - il devrait s'agir de *ngIf ou ngIf.

Les directives structurelles peuvent être utilisées avec des balises <template> explicites ou implicites <template>. Pour la version implicite, un * est requis pour indiquer qu'il s'agit d'une directive structurelle.

explicite 

<template [ngIf]="someExpr">
   <div>content</div>
</template>

ou depuis 2.0.0 préféré

<ng-container *ngIf="someExpr">
   <div>content</div>
</ng-container>

implicite 

<div *ngIf="someExpr"></div>

Habituellement, vous utiliserez la version implicite car elle est plus concise.

Quand utiliser la version explicite?

Il existe des cas d'utilisation où la version implicite ne fonctionne pas.

  • Si vous souhaitez appliquer plusieurs directives structurelles telles que ngFor et ngIf qui ne sont pas prises en charge, vous pouvez utiliser le formulaire explicite pour l'une d'entre elles.

Au lieu de cette syntaxe invalide

<div *ngFor="let item of items" *ngIf="!item.hidden"></div>

vous pouvez utiliser

<ng-container *ngFor="let item of items">
  <div *ngIf="!itemHidden></div>
</ng-container>
  • Si vous souhaitez appliquer la directive structurelle à plusieurs éléments

Par exemple, vous souhaitez répertorier plusieurs éléments avec name et price par ligne

<tr>
  <td *ngFor="???">item.name</td>
  <td>item.price</td>
</tr>

<tr>
  <ng-container *ngFor="let item of items">
    <td>item.name</td>
    <td>item.price</td>
  </ng-container>
</tr>
8
Günter Zöchbauer

Pour rester simple, dans les dernières versions angulaires à ce jour, par exemple lorsque nous utilisons * ngIf comme ci-dessous.

<div *ngIf = "condition">
//code here
</div>

Maintenant, le code ci-dessus est effectivement rendu par angular comme ci-dessous:

<ng-template [ngIf]="condition">
<div>
//code here
</div>
</ng-template>

Nous pouvons donc utiliser directement * ngIf en tant que directive structurelle ou [ngIf] en tant que directive d'attribut, mais avec un modèle ng. J'espère que cela rend les choses plus claires.

0
Abdur Rahman