angular2中的ng-if和*ng-if有什么区别答案

【问题标题】：What is the difference between ng-if and *ng-if in angular2angular2中的ng-if和*ng-if有什么区别
【发布时间】：2016-11-11 08:02:28
【问题描述】：

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

我应该记住选择一个而不是另一个以及何时使用这些指令有什么区别吗？

【问题讨论】：

标签： javascript angular angular-ng-if

【解决方案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> 标记一起使用。对于隐式版本，需要 * 来指示它是结构指令。

显式

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

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

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

现在，上面的代码实际上是通过angular渲染如下：

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

因此，我们可以直接使用 *ngIf 作为结构指令，也可以使用 [ngIf] 作为属性指令但使用 ng 模板。希望这能让事情更清楚。

【讨论】：

【解决方案4】：

目前在 Angular 中，我们使用 ngIf 而不是 ng-if，因此考虑到这里的差异，我们可以这样实现它：如果是 *ngIf - <div *ngIf="condition">Content to render when condition is true.</div>

如果是 ngIf - <ng-template [ngIf]="condition"><div>Content to render when condition is true.</div></ng-template>

您可以在 angular.io>API 参考中找到详细信息

【讨论】：