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

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>

它与所有结构指令的模式相同

Plunker的例子

更新

随着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官方文档中引用:

当我们检查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,even和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>