Angular 4/5中ngFor索引异常报错问题求助

嘿，我完全懂你碰到的麻烦——用*ngFor循环生成输入框列表时，一加上索引定义就编译报错，去掉索引反而能正常运行对吧？这种情况我在项目里遇到过好多次，大概率是语法细节没处理对或者变量冲突导致的，下面给你梳理几种最常见的问题和对应的解决办法：

1. 检查*ngFor的语法格式是否正确 #

带索引的*ngFor有严格的语法要求，最容易出错的就是分隔符和变量赋值写法：
正确的写法应该是这样的：

<div *ngFor="let item of inputList; let idx = index">
  <input [(ngModel)]="inputList[idx]" placeholder="请输入内容">
</div>

要注意这几个关键点：

• 循环变量（let item of inputList）和索引变量（let idx = index）之间必须用**分号;**分隔，不能用逗号
• 索引变量的赋值是let 自定义变量名 = index，比如let i = index或者let idx = index，不能写成let index = i这种反向赋值
• 确保组件类里已经正确定义了循环用的数组，比如在.ts文件里：

  inputList: string[] = new Array(3).fill(''); // 初始化3个空字符串的数组
  

2. 避免模板中的变量名冲突 #

如果你的模板其他区域已经使用了和索引变量同名的变量，就会导致编译冲突。比如：

<!-- 错误示例：外部已经使用了i变量 -->
<div *ngIf="i > 0">
  <div *ngFor="let item of inputList; let i = index">...</div>
</div>

解决办法很简单：给索引换一个独特的变量名，比如let inputIndex = index，避免和外部变量重名。

3. 检查ngModel的绑定逻辑 #

如果你的数组是对象数组，用索引绑定时要确保路径正确，不要出现undefined的情况。比如：

// 组件里的对象数组定义
userList: {name: string}[] = [{name: ''}, {name: ''}];

对应的模板应该这样写：

<div *ngFor="let user of userList; let idx = index">
  <input [(ngModel)]="userList[idx].name" placeholder="用户名">
</div>

其实这里直接绑定user.name会更简洁，但如果一定要用索引，就要保证数组对应位置的元素确实存在。

4. 确认Angular版本兼容性 #

虽然现在主流Angular版本都支持let idx = index的语法，但如果是非常早期的Angular版本（比如Angular 2.x的某些旧版本），语法可能略有差异。不过这种情况比较少见，优先排查前面的几个问题就好。

如果按照上面的方法还是解决不了，建议把你写的*ngFor代码片段和组件里的数组定义贴出来，这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者Bird Dad