使用FormBuilder数组结合@for循环时，模板中如何追踪元素？

针对你用Angular FormBuilder创建表单数组，在模板中使用@for遍历extras.controls时的track选型问题，直接分析各选项的优劣和最佳实践：

各track选项分析 #

1. track extra（推荐） #

每个FormControl都是独立的实例，引用唯一且稳定。当你对表单数组进行增删操作时，每个控件的实例引用不会因为位置变化而改变，Angular能精准识别每个元素，避免错误地复用DOM节点。比如删除中间的控件后，后续控件的实例依然是原来的，Angular会正确对应到新的位置，不会出现表单值和控件不匹配的问题。这种方式性能也更优，因为实例引用的变化频率极低，只有当你完全替换某个控件实例时才会触发重新渲染。

2. track $index（不推荐） #

如果表单数组存在动态增删操作，$index会随着元素位置变化而改变。比如删除索引为1的控件后，原来索引为2的控件会变成索引1，此时Angular会复用原来索引1对应的DOM节点，导致控件和DOM的绑定关系混乱，出现表单值显示错误、验证状态异常等问题。只有当数组元素完全不会变动位置（仅静态展示）时，才适合用track $index，显然表单数组不符合这种场景。

3. track extra.value或其他属性（不推荐） #

表单控件的value可能重复（比如两个输入框输入相同内容），这会导致Angular误判为同一个元素，复用错误的DOM。另外，value是频繁变化的属性，每次输入都会触发track表达式的重新计算，额外消耗性能，完全没必要。

总结 #

在遍历Angular表单数组的controls时，track extra是最佳实践，它能确保DOM元素和表单控件的对应关系准确，同时兼顾性能。

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