Qual è la differenza tra ng-if e * ng-se in angular2

Question

Sto cercando di capire la differenza tra ng-if e * ng-if, ma a me sembrano uguali.

C'è una differenza che dovrei tenere a mente scegliendo l'una sull'altra e quando utilizzare queste direttive?

Answer 1

ngIf è la direttiva. Poiché si tratta di una direttiva strutturale (basata su modelli), è necessario utilizzare il prefisso * per utilizzarlo nei modelli.

*ngIf corrisponde al collegamento per la seguente sintassi ("zucchero sintattico"):

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

Equivalente a:

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

Vedere questo documento per maggiori dettagli:

• https://angular.io/docs/ts/latest/guide/structural-directives.html

Answer 2

La differenza è che entrambi non sono supportati in Angular2 ;-) almeno nelle versioni correnti - dovrebbe essere *ngIf o ngIf.

Le direttive strutturali possono essere utilizzate con tag espliciti <template> o tag impliciti <template>. Per la versione implicita è necessario un * per indicare che si tratta di una direttiva strutturale.

esplicito

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

o dal 2.0.0 preferito

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

implicita

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

Di solito si utilizza la versione implicita perché è più conciso.

Quando utilizzare la versione esplicita?

Esistono casi di utilizzo in cui la versione implicita non funziona.

• Se si desidera applicare più di una direttiva strutturale come ngForengIf che non è supportato, quindi è possibile utilizzare la forma esplicita per uno di questi.

Invece di questa sintassi non valida

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

è possibile utilizzare

<ng-container *ngFor="let item of items"> 
    <div *ngIf="!itemHidden></div> 
</ng-container> 

• Se si desidera applicare la direttiva strutturale a più di un elemento

Per esempio si desidera elencare diversi elementi w con name e price per riga

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