В чем разница между ng-if и * ng-if в angular2

Ответ 1

ngIf - это директива. Поскольку это структурная директива (основанная на шаблонах), вам нужно использовать префикс *, чтобы использовать его в шаблонах.

*ngIf соответствует ярлыку для следующего синтаксиса ( "синтаксический сахар" ):

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

Эквивалент:

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

Подробнее см. в этом документе:

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

Ответ 2

Разница в том, что обе версии не поддерживаются в Angular2;-) по крайней мере в текущих версиях - это должно быть *ngIf или ngIf.

Структурные директивы могут использоваться с явными тегами <template> или неявным тегом <template>. Для неявной версии a * требуется указать, что это структурная директива.

Явный

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

или, поскольку 2.0.0 предпочтительнее

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

неявным

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

Обычно вы будете использовать неявную версию, потому что она более кратка.

Когда использовать явную версию?

Существуют случаи, когда неявная версия не работает.

• Если вы хотите применить более одной структурной директивы типа ngFor и ngIf, которая не поддерживается, вы можете использовать явную форму для одного из них.

Вместо этого недействительного синтаксиса

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

вы можете использовать

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

• Если вы хотите применить структурную директиву к нескольким элементам

Например, вы хотите перечислить несколько элементов с name и price за строку

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

Ответ 3

Для простоты, в последних версиях на данный момент, например, когда мы используем * ngIf, как показано ниже.

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

Теперь вышеприведенный код фактически отображается с помощью angular, как показано ниже:

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

Следовательно, мы можем либо использовать * ngIf напрямую в качестве структурной директивы, либо мы можем использовать [ngIf] в качестве директивы атрибута, но с шаблоном ng. Надеюсь, что это делает вещи более понятными.