如何動態更改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')，因爲它不分配的ID又返回null。

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。