Question

我试图理解ng-if和* ng-if之间的区别，但它们看起来和我一样。

我是否应该记住选择其中一个以及何时使用这些指令？

Answer 1

ngIf是指令。因为它是结构指令（基于模板），所以您需要使用*前缀将其用于模板。

*ngIf对应于以下语法的快捷方式（＆＃34;句法糖＆＃34;）：

<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

Answer 2

区别在于Angular2中不支持两者;-)至少在当前版本中 - 它应该是*ngIf或ngIf。

结构指令可以与显式<template>标记或隐式<template>标记一起使用。对于隐式版本，需要*来表明它是结构指令。

<强>显式

<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等多个结构指令，则可以使用显式表单作为其中之一。< / LI>

而不是这种无效的语法

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

Answer 3

为简单起见，例如，在最新的最新版本中，例如当我们使用* ngIf时，如下所示。

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

现在，上面的代码实际上是按如下所示的角度渲染的：

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

因此，我们既可以直接将* ngIf用作结构指令，也可以将[ngIf]用作属性指令，但要使用ng-template。希望这可以使事情变得更清楚。

ng-if和* ng-if在angular2中有什么区别

3 个答案: