ngOnInitを使用してスタイル属性を適用する角2

Question

要素を検査するときに以下のコードでエラーは発生しませんが、class = "circle"の要素には適用されません。私にngStyleを紹介しないでください。なぜこれが機能していないのか知りたいのですが。

export class PlayersComponent implements OnInit { 
     items: any; 

     ngOnInit() { 

      this.items = document.querySelector('.circle'); 
      for(var i = 0; i < this.items.length; i++){ 
      if(i % 2 == 0) { 
      this.items[i].style.color = '#0000FF'; 
      } 
      else { 
       this.items[i].style.color = '#FF0000'; 
      } 
      } 
     } 
    } 

Answer 1

要素はOnInitでレンダリングされません。 AfterViewInitとquerySelectAllを使用してすべての要素を取得する必要があります。このようにDOMにアクセス

export class AppComponent implements AfterViewInit { 
    items: any; 

    ngAfterViewInit() { 
     this.items = document.querySelectorAll('.circle'); 
     for (let i = 0; i < this.items.length; i++) { 
     if (i % 2 === 0) { 
      this.items[i].style.color = '#0000FF'; 
     } 
     else { 
      this.items[i].style.color = '#FF0000'; 
     } 
     } 
    } 
    } 

はかかわらず、角度2には良いアイデアではありません。このarticleは角度のあるやり方をするのに良いガイドです。

Answer 2

他の人が言っているように、Angular 2のようなDOMを操作することは、通常は好ましい方法ではありません。

これを行うには、ngAfterViewInit（ngOnInitのようなライフサイクルフック）を呼び出して、コードを実行する前にDOM要素が存在することを確認する必要があります。

もう1つの問題は、適切なDOM要素を操作していない可能性がありますが、それ以上の情報なしでは伝えることは不可能です。