javascript - else - ¿Cuál es la diferencia entre ng-if y*ng-if en angular2

ngif angular 4 example

Question

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?

Answer 1

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 ngFor y ngIf que 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>

Answer 2

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.

Answer 3

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:

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