どのように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

id属性内にngForインデックス（i）を連結します。

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

あなたは以上のループあなたのDOM ngForを照会する必要があり、あなたはngForに#template-variableを使用してこれを行うには

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

Demo Here

---

もっと正しい方法を同じ内部ngAfterViewInitライフサイクルイベントを行うことができますテンプレートとそれぞれのDOMを見つけるために@ViewChildrenデコレータ。