Question

以下样本中的ngFor之前的含义是什么？为什么需要它？

<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
</div>

Answer 1

ngFor只能应用于<template>。 *ngFor是可以应用于任何元素的简短形式，<template>元素是在场景后隐式创建的。

https://angular.io/api/common/NgForOf

语法


<li *ngFor="let item of items; let i = index">...</li>

<li template="ngFor let item of items; let i = index">...</li>

<template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

所有structural directives

的模式相同

Plunker example

<强>更新

引入了2.0.0最终版本<ng-container>，其行为类似于<template>（实际上未添加到DOM的包装元素），但支持*ngFor="..."语法。

Answer 2

当Angular在ngFor中看到星号（*）时，它将使用其DOM元素作为模板来渲染循环。

<div *ngFor="#hero of heroes">
  {{ hero.name }}
</div>

相当于

<template ngFor #hero [ngForOf]="heroes">
    <div>
       {{ hero.name }}
    </div>
</template>

Answer 3

来自官方Angular documentation的引用：

当我们审核NgFor和NgIf内置指令时，我们就召集了   一种奇怪的语法：出现在之前的星号（*）   指令名称。

*是一种语法糖，使其更容易阅读和   编写指令，借助模板修改HTML布局。   NgFor，NgIf和NgSwitch都添加和删除元素子树   包含在<template>标记中。

有关详情，请查看

https://angular.io/guide/template-syntax#built-in-structural-directives

https://angular.io/guide/structural-directives#asterisk

* ngFor有四个属性： index ， last ，甚至和 odd 。我们可以使用局部变量获得每次迭代的索引值，最后一个值，奇数，甚至索引本身。这是一个有效的例子：

demoArray= [1,2,3,4,5,6,7,8,8,9];
<ul>
  <li *ngFor='#item of demoArray #i=index #l=last #e=even'>
    Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li>
</ul>

Answer 4

它们被称为结构指令，因为它们具有更改DOM结构的能力。有关更多信息，您可以访问 https://angular.io/guide/structural-directives。

Answer 5

在*ngFor中，*是使用带有模板标记的新角度模板语法的简写，这也称为结构指令。知道*只是显式定义数据绑定的简写是有帮助的。在模板标签上。

* in * ngFor在angular2中是什么意思？

5 个答案: