AngularJS 5中如何为循环生成的组件动态添加唯一ID？

这其实是Angular开发里很常见的需求，我们可以通过两种简单可靠的方式来实现：

方案一：利用*ngFor的索引变量生成ID #

Angular的*ngFor指令支持获取当前循环项的索引，只需要在循环表达式里加上let i = index即可。然后我们可以把这个索引和固定前缀拼接，作为每个div的唯一ID。

修改后的代码示例：

<div class="container2">
  <div *ngFor="let dependants of data[0].dependsOn; let i = index" 
       id="dependant-item-{{i}}">
    <app-sequence-element-preview [sequenceElement]='dependants'>
    </app-sequence-element-preview>
  </div>
</div>

如果你更倾向于使用Angular的属性绑定语法，也可以写成：

<div class="container2">
  <div *ngFor="let dependants of data[0].dependsOn; let i = index" 
       [id]="'dependant-item-' + i">
    <app-sequence-element-preview [sequenceElement]='dependants'>
    </app-sequence-element-preview>
  </div>
</div>

这两种写法都能实现需求，字符串插值{{}}更直观，属性绑定[]则适合需要更复杂动态计算的场景。这种方案的优势是实现简单，不需要依赖数组项的额外属性，适合数组本身没有唯一标识的情况。

方案二：利用数组项自身的唯一属性生成ID #

如果你的dependants对象本身带有唯一标识（比如后端返回的id、uuid等字段），那更推荐用这个属性来生成ID——这样即使数组的顺序发生变化，每个元素的ID依然和自身绑定，不会因为索引变动而改变，稳定性更强。

假设dependants有一个id字段，代码示例：

<div class="container2">
  <div *ngFor="let dependants of data[0].dependsOn" 
       id="dependant-{{dependants.id}}">
    <app-sequence-element-preview [sequenceElement]='dependants'>
    </app-sequence-element-preview>
  </div>
</div>

这种方案更符合实际业务场景，真实项目中后端返回的数据通常都会带有唯一标识，用这个生成的ID语义化也更好。

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