Question

这是问题的示例代码。<p *ngIf="heroes.length >= 4">There are many heroes!</p> 如果我删除*它给我错误

Answer 1

源：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk

星号（*）效果

复制代码

<div *ngIf="hero">{{hero}}</div>
<div *ngFor="let hero of heroes">{{hero}}</div>

我们在这些指令名前加上星号（*）。

星号是＆＃34;语法糖＆＃34;。它简化了作者和读者的ngIf和ngFor。在引擎盖下，Angular用更详细的形式替换了星号版本。

接下来的两个ngIf示例实际上是相同的，我们可以用任何一种风格编写：

复制代码

<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

我们大多数人宁愿写作风格（A）。

值得了解的是Angular将样式（A）扩展为样式（B）。它将段落及其内容移动到标记内。它将指令移动到标记，在标记中它变为属性绑定，用方括号括起来。主机组件的条件属性的布尔值确定是否显示模板化内容。

Answer 2

我们为ngIf和ngFor指令使用asterik的原因是因为它们改变了DOM的结构。它们也被称为结构指令。每个结构指令前缀都带有asterik。

结构指令的示例： * ngIf，* ngFor，* ngSwitchCase，* ngSwitchDefault 等是结构指令的一些示例

代码示例：

<p *ngIf="true"> Expression is true and ngIf is true. This paragraph is in the DOM. </p>

<p *ngIf="false"> Expression is false and ngIf is false. This paragraph is not in the DOM.</p>

结帐此链接以深入了解结构指令： https://angular.io/guide/structural-directives

angular2：为什么我们使用带有ngif和ngfor的asterik？

2 个答案: