在Angular中,我们可以使用ngFor 结构指令来循环浏览一个数组。在实践中,我们可以设想一个无序的todo列表,如下所示。
<ul>
<li *ngFor="let todo of todos">{{ todo }}</li>
</ul>
而这将成功输出你所有的todos。但是,如果我们想为每个todo添加一个数字呢?例如,第一个todo应该显示"Todo 1: Walk the dog" 。
在这种情况下,我们可以在指令里面添加一个索引。
<ul>
<li *ngFor="let todo of todos; let i = index">
Todo {{ i + 1 }}: {{ todo }}
</li>
</ul>
当然,我们的循环是以0为索引的,所以我们在索引中加入1 ,以获得更人性化的版本。现在我们的数组的每个元素都有一个索引了。
编码愉快!