angular - 你如何动态更改 Angular 中元素的 id？

Question

我有一个循环中的元素，我只想更改它的 ID 以避免冲突。我做了一些搜索，但似乎找不到任何东西。

<div *ngFor="let location of job.tasks; let i = index">
  <div id="index-{{i}}">
    {{index}}
  </div>
</div>

问题是当我调用 ngOnInit document.getElementById('index-1') 它返回 null 因为它还没有分配 id。

Answer 1

在 id 属性中连接 ngFor index(i)。

<div *ngFor="let location of job.tasks; let i = index">
  <div id="index-{{i}}">
    {{index}}
  </div>
</div>

你应该查询你的 DOM ngFor 循环，你可以在 ngAfterViewInit 生命周期事件中做同样的事情

ngAfterViewInit(){
    console.log(document.getElementById('1'));
}

Demo Here

---

更正确的方法是在 ngFor 模板和 @ViewChildren 装饰器上使用 #template-variable 来找出相应的 DOM。