2016-02-19 117 views

回答

23

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>

这是所有structural directives

Plunker example

更新

随着2.0.0最终版本相同的模式<ng-container>引入,其行为类似<template>(实际上没有加入到包装元素DOM),但支持*ngFor="..."语法。从官方的角度文档

+0

NgFor的角度链接已经死了 – crh225

+0

我只是在打电话。你可以在http://angular.io中搜索'ngfor'中的API文档以获得正确的链接 –

+0

@GünterZöchbauer,所以通过指定星号,我基本上说一个角度应该创建一个'template'元素,更正? –

4

报价:

当我们回顾了NgForNgIf内置的指令,我们叫了 语法的怪胎:星号(*)的 指令之前出现名称。

*是一种语法糖,它使得它更容易阅读,而 可以通过模板帮助修改HTML布局。 NgForNgIfNgSwitch全部添加和删除 包裹在<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> 
10

当角看到了ngFor星号(*),它将使用DOM元素为模板来渲染循环。

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

相当于

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

#不再支持使用let而不是http://www.angulartutorial.net/2016/06/ng-repeat-in-angular-js-2.html – Prashobh

+0

我很喜欢这个回答它是否符合语法 – djeikyb

0

*ngFor *是使用带有模板标签的新角度模板语法的简写形式,这也称为结构性指令。有助于了解*只是显式定义模板上的数据绑定的简写标签。