为什么索引变量在 Angular 2 的 *ngFor 循环中不显示索引？

Question

如果我们想在angular 1中显示ng-repeat的索引，

我们使用以下代码

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

现在，当我在 Angular 2 中实现相同的功能时，它不显示索引值

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

但是当我在*ngFor中添加#i = index时，它突然显示索引值

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

因为第 2 和第 3 代码是相同的，但它只有在我们声明局部变量并将变量分配给索引时才有效。

这样一个模棱两可的事情。

任何人都可以帮助理解更好地使用它吗？

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

不能使用 index 的原因是它在 ng-for 的本地范围内

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

# 或 let 表示局部变量，这里的索引是 ng for 的局部变量，所以在 ng 之外，因为它没有定义所以无法访问，要访问这些数据，我们使用当前作用域中的局部变量来引用局部作用域为。因此，出于这个特定原因，我们需要使用任何局部变量来引用。

Answer 5

你的第一个代码sn-p是angular 1.x ng-repeat，它创建了new child scope，所以$index是new child scope的属性，它是暴露的，你可以直接使用.就像您在 html 中使用控制器的任何 $scope 属性而不使用 prefixing $scope 一样。

现在在 angular2 中，在这种情况下没有单独的范围，只有 this 的 javascript。

另外，angular2+ 写在typescript 所以ngFor export 变量index（还有其他属性，如奇数、偶数、第一、最后），要使用它，你需要声明一些局部变量。

ngFor 创建一个类似于 javascript 的 for loop 的块。并且i 创建了一个模板局部变量来获取数组的索引。

另外，使用let 代替#，自2.0.0-beta.17 起更改

这里有一些比较好的文章。 link, link

Answer 6

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