* in * ngFor in angular2中的含義是什麼？

Question

下面的示例中的* ngfor之前的含義是什麼以及爲什麼需要它？

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

Answer 1

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="..."語法。從官方的角度文檔

Answer 2

報價：

當我們回顧了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> 

Answer 3

當角看到了ngFor星號（*），它將使用DOM元素爲模板來渲染循環。

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

相當於

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

Answer 4

他們被稱爲結構指令，因爲他們必須改變DOM結構的能力。 欲瞭解更多信息，你可以訪問 https://angular.io/guide/structural-directives。

Answer 5

*ngFor *是使用帶有模板標籤的新角度模板語法的簡寫形式，這也稱爲結構性指令。有助於瞭解*只是顯式定義模板上的數據綁定的簡寫標籤。