Angular 4：如何给*ngFor传数组索引？嵌套数组遍历失效怎么办？

开发者阿泽

2026-5-20

Angular 4相关问题解答

问题1：如何将数组索引传递给*ngFor指令？

嘿，这个操作超简单！在Angular 4的*ngFor指令里，你可以直接用内置的index变量来获取当前循环项的索引，只需要在指令里加上let 自定义变量名 = index就行。举个实际的例子：

<ul>
  <li *ngFor="let fruit of fruits; let idx = index">
    第{{ idx + 1 }}个水果：{{ fruit }}
  </li>
</ul>

这里的idx就是当前项的索引（从0开始计数），如果想显示从1开始的序号，直接给idx加1就好啦。

看你的数据结构：datas = [ [{id:1}], [{id:2}], ... ]，这是个三层嵌套的结构——外层是数组，每个元素又是一个包含单个对象的数组。你之前直接写{{ data.id }}肯定不行，因为data是那个内层的数组，不是带id的对象呀！

给你两种解决思路：

思路一：嵌套*ngFor循环
如果内层数组可能有多个对象，那就再套一层*ngFor遍历内层数组：
```
<div *ngFor="let innerArray of datas">
  <div *ngFor="let item of innerArray">
    {{ item.id }}
  </div>
</div>
```
思路二：直接访问内层数组的第一个元素
要是你能确定每个内层数组永远只有一个对象，那可以直接通过索引[0]拿到里面的对象，不用嵌套循环：
```
<div *ngFor="let innerArray of datas">
  {{ innerArray[0].id }}
</div>
```