下面的示例中的* ngfor之前的含义是什么以及为什么需要它?* in * ngFor in angular2中的含义是什么?
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
下面的示例中的* ngfor之前的含义是什么以及为什么需要它?* in * ngFor in angular2中的含义是什么?
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
ngFor
只能应用于<template>
。 *ngFor
是可应用于任何元素的简短形式,并且<template>
元素是在场景后隐式创建的。
https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
语法
<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>
更新
随着2.0.0最终版本相同的模式<ng-container>
引入,其行为类似<template>
(实际上没有加入到包装元素DOM),但支持*ngFor="..."
语法。从官方的角度文档
报价:
当我们回顾了
NgFor
和NgIf
内置的指令,我们叫了 语法的怪胎:星号(*)的 指令之前出现名称。
*
是一种语法糖,它使得它更容易阅读,而 可以通过模板帮助修改HTML布局。NgFor
,NgIf
和NgSwitch
全部添加和删除 包裹在<template>
标记中的元素子树。
欲了解更多详情请https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template
* ngFor具有四个属性:指数,最后,甚至和奇。我们可以使用局部变量获取每次迭代的索引值,最后一个值,奇数值,甚至索引本身的值。这是一个工作示例:
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>
当角看到了ngFor星号(*),它将使用DOM元素为模板来渲染循环。
<div *ngFor="#hero of heroes">
{{ hero.name }}
</div>
相当于
<template ngFor #hero [ngForOf]="heroes">
<div>
{{ hero.name }}
</div>
</template>
他们被称为结构指令,因为他们必须改变DOM结构的能力。 欲了解更多信息,你可以访问 https://angular.io/guide/structural-directives。
*ngFor
*是使用带有模板标签的新角度模板语法的简写形式,这也称为结构性指令。有助于了解*只是显式定义模板上的数据绑定的简写标签。
NgFor的角度链接已经死了 – crh225
我只是在打电话。你可以在http://angular.io中搜索'ngfor'中的API文档以获得正确的链接 –
@GünterZöchbauer,所以通过指定星号,我基本上说一个角度应该创建一个'template'元素,更正? –