Angular(5)中动态传递索引至表单name属性的问题

这个问题的核心在于Angular模板中静态属性和动态属性绑定的区别——你直接用name="..."的话，里面的i会被当作字符串字面量，而不是变量来解析。要让索引i被正确计算成数字，你需要使用属性绑定语法（也就是方括号[name]）来动态生成name属性值。

两种可行的写法： #

1. 使用ES6模板字符串（更简洁易读）

<div *ngFor="let email of user.emailAddresses; let i = index">
  <form-input 
    label="Email Address:" 
    [name]="`EmailAddresses[${i}].EmailAddress`" 
    [(ngModel)]="user.emailAddresses[i].emailAddress" 
    ngDefaultControl>
  </form-input>
</div>

2. 使用字符串拼接

如果你的环境对ES6模板字符串支持有限（不过Angular 5已经完全支持了），也可以用传统的字符串拼接方式：

<div *ngFor="let email of user.emailAddresses; let i = index">
  <form-input 
    label="Email Address:" 
    [name]="'EmailAddresses[' + i + '].EmailAddress'" 
    [(ngModel)]="user.emailAddresses[i].emailAddress" 
    ngDefaultControl>
  </form-input>
</div>

为什么原来的写法不行？ #

当你写name="EmailAddresses[i].EmailAddress"时，Angular会把整个字符串作为静态值赋值给name属性，不会解析其中的变量i。而用[name]绑定表达式时，Angular会计算表达式的结果，把变量i替换成当前循环的索引数字，最终生成类似EmailAddresses[0].EmailAddress、EmailAddresses[1].EmailAddress这样的正确name值。

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