javascript - else - ¿Cuál es la diferencia entre ng-if y*ng-if en angular2
ngif angular 4 example (3)
Estoy tratando de entender la diferencia entre ng-if y * ng-if, pero a mí me parecen iguales.
¿Hay alguna diferencia que deba tener en cuenta al elegir una sobre la otra y cuándo debo usar estas directivas?
La diferencia es que ambos no son compatibles con Angular2 ;-) al menos en las versiones actuales; debería ser *ngIf o ngIf .
Las directivas estructurales se pueden usar con etiquetas <template> explícitas o <template> implícitas. Para la versión implícita se requiere un * para indicar que es una directiva estructural.
explícito
<template [ngIf]="someExpr">
<div>content</div>
</template>
o desde 2.0.0 preferido
<ng-container *ngIf="someExpr">
<div>content</div>
</ng-container>
implícito
<div *ngIf="someExpr"></div>
Usualmente usará la versión implícita porque es más concisa.
¿Cuándo usar la versión explícita?
Hay casos de uso donde la versión implícita no funciona.
- Si desea aplicar más de una directiva estructural como
ngForyngIfque no es compatible, entonces puede usar la forma explícita para uno de estos.
En lugar de esta sintaxis inválida
<div *ngFor="let item of items" *ngIf="!item.hidden"></div>
puedes usar
<ng-container *ngFor="let item of items">
<div *ngIf="!itemHidden></div>
</ng-container>
- Si desea aplicar la directiva estructural a más de un elemento.
Por ejemplo, desea enumerar varios artículos con name y price por fila
<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>
Para mantenerlo simple, en las últimas versiones angulares hasta la fecha, por ejemplo, cuando usamos * ngSi gusta a continuación.
<div *ngIf = "condition">
//code here
</div>
Ahora, el código anterior se procesa de forma angular como se muestra a continuación:
<ng-template [ngIf]="condition">
<div>
//code here
</div>
</ng-template>
Por lo tanto, podemos usar * ngIf directamente como una directiva estructural o podemos usar [ngIf] como una directiva de atributos pero con una plantilla ng. Espero que esto haga las cosas más claras.
ngIf es la directiva. Debido a que es una directiva estructural (basada en plantillas), necesita usar el prefijo * para usarlo en plantillas.
*ngIf corresponde al acceso directo para la siguiente sintaxis ("azúcar sintáctica"):
<template [ngIf]="condition">
<p>
Our heroes are true!
</p>
</template>
Equivalente a:
<p *ngIf="condition">
Our heroes are true!
</p>
Vea este documento para más detalles: