爲什麼index變量在Angular 2的* ngFor循環中不顯示索引？

Question

如果我們希望在角度1顯示NG-重複的索引，

我們使用下面的代碼

<div ng-repeat="car in cars"> 
<ul> 
    <li>Index: {{$index+1}}</li> 
    <li>Car Name:{{car.name}}</li> 
</ul> 
</div> 

現在，當我在角2實現相同的，所以不顯示索引值

<div *ngFor="#car of cars"> 
<ul> 
     <li>Index: {{index+1}}</li> 
     <li>Car Name:{{car.name}}</li> 
    </ul> 
</div> 

但是，當我在* ngFor添加＃I =指數，它突然顯示索引值

<div *ngFor="#car of cars; #i = index"> 
    <ul> 
      <li>Index: {{i+1}}</li> 
      <li>Car Name:{{car.name}}</li> 
     </ul> 
</div> 

由於第二和第三代碼都是相同的，但它僅在我們聲明局部變量並將變量分配給索引時才起作用。

這樣曖昧的東西。

有沒有人有助於理解這個更好的使用？

Answer 1

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

DEMO PLNKR

Answer 2

爲了防止您的模板中的變量覆蓋。還有odd,even,first,last變量，您可以在*ngFor循環中分配變量。但是，如果你有這樣的組件：

@Component({..}) 
export class SillyComponent { 

    public first: number; 
    public last: number; 
    public index: number; 

} 

有沒有辦法從*ngFor循環中訪問這些，如果他們立即被模板引擎分配。這是您必須在模板中首先明確聲明它們的原因之一。除此之外，它還爲您提供了更好的IDE提示和代碼可讀性

我還看到您使用的是非常非常古老的記法。你應該在模板中使用let關鍵字現在來聲明變量：

<div *ngFor="let car of cars; let i = index"> 
    <ul> 
     <li>Index: {{i+1}}</li> 
     <li>Car Name:{{car.name}}</li> 
    </ul> 
</div> 

Answer 3

參考如下：https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

<div *ngFor="#car of cars;let i=index"> 
 
    <ul> 
 
      <li>Index: {{i+1}}</li> 
 
      <li>Car Name:{{car.name}}</li> 
 
     </ul> 
 
</div>

Answer 4

不能使用索引的原因是，它是在本地範圍ng-for

<div *ngFor="#car of cars; #i = index"> 

＃或let表示局部變量，這裏的索引是局部變量for ng因此在外部ng因爲它沒有被定義，所以它不可訪問，爲了訪問這個數據我們使用當前範圍的局部變量來引用局部範圍ng對於。因此，爲了這個特定的原因，我們需要引用任何局部變量。

Answer 5

你1的代碼片段是角1.x的ng-repeat，創造new child scope，所以$index是暴露的new child scope財產，就可以直接使用。像你使用任何$scope控制器的屬性，而不是prefixing $scope在html中。

現在angular2，在這種情況下，沒有單獨的範圍，只是JavaScript代碼this。

此外，angular2 +是寫在typescript所以ngFor export變量index（還有其他屬性，如奇，偶，第一，最後），你需要聲明一些本地變量來使用它。

ngFor創建一個像JavaScript的for loop塊。和i創建一個模板局部變量來獲取數組的索引。

還，使用let代替#，改變，因爲2.0.0-beta.17

下面是一些比較好的文章。 link，link