带有索引的 ngFor - HTML

在Angular中，ngFor指令允许我们迭代数组或对象并创建重复元素。通常，我们这样使用它：

<div *ngFor="let item of items">
  {{ item }}
</div>

在这种情况下，我们只需访问数组中的每个元素并将其显示在HTML中。

然而，有时我们需要了解每个元素在数组中的位置。这时候，我们可以使用ngFor指令的语法来获取当前索引：

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

在这里，我们将ngFor指令的第二个参数设置为“index”，这将允许我们从当前迭代中获取当前索引。然后我们可以在HTML中使用当前索引来显示项目在数组中的位置。

此外，我们还可以在ngFor指令的第三个参数中指定迭代的长度。

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

在这个例子中，我们将ngFor指令的第三个参数设置为“last”，这将允许我们在HTML中检查当前迭代是否是数组的最后一个元素。我们可以使用这个来检查数组迭代是否已经完成。

在实际应用中，我们经常需要使用这个技巧来管理我们的数组，并从Angular中获取更多的意义。

带有索引的ngFor指令可以让我们轻松地获取数组中每个元素的索引，并快速利用这些功能。在我们的HTML代码中设置这些参数非常简单，并且可以大大提高我们的开发效率。