如何动态更改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

在ngFor属性中连接i索引（id）。

<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

使用#template-variable模板和ngFor装饰器上的@ViewChildren以更正确的方式执行此操作，以找出相应的DOM。