Angular 中的 Index in ng for

在 Angular 中，您可以使用 ngFor 指令来循环遍历一个数组，并在模板中渲染每个数组元素。除了使用 ngFor，您还可以使用 index in ngFor 语法来获取每个元素的索引。

如何使用

使用 index in ngFor 语法很简单。只需在 <ng-container> 或 <ng-template> 标记中添加 let index，然后使用 index 变量来获取每个元素的索引。以下是一个例子：

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

这个例子展示了如何使用 index in ngFor 语法来遍历 items 数组，并在模板中显示每个元素的索引和值。

实际应用场景

使用 index in ngFor 语法的场景很多。以下是一些实际用例：

根据索引应用样式

您可以使用 index 变量来根据元素的索引应用不同的样式。例如，您可以为奇数和偶数行应用不同的颜色：

<ng-container *ngFor="let item of items; index as i">
  <div [ngClass]="i % 2 === 0 ? 'even' : 'odd'">{{item}}</div>
</ng-container>

根据索引显示图标

您可以使用 index 变量来根据元素的索引显示不同的图标。例如，您可以在列表中显示类似于 "1、2、3" 的序号：

<ng-container *ngFor="let item of items; index as i">
  <div>{{i + 1}}. {{item}}</div>
</ng-container>

获取被选中元素的索引

如果您正在使用 Angular 的表单控件来收集用户输入，您可以使用 index 变量来获取被选中元素的索引。例如，您可以使用 ngModel 指令在滑块控件中收集用户输入，并在模板中显示所选元素的索引：

<div *ngFor="let item of items; index as i">
  <input type="radio" name="selectedItem" [value]="i" (ngModel)="selectedItem = i">
  {{item}}
</div>
<p *ngIf="selectedItem !== undefined">选中了第 {{selectedItem + 1}} 个元素</p>

结束语

使用 index in ngFor 语法可以让您更好地控制循环遍历的数组，并在模板中针对数组元素的索引执行各种操作。希望这篇文章能帮助您更好地理解这个语法。