角2の加算ハイライト

Question

私は角度2を使用して表示する接続の配列を持っているし、このように活字体：私は、接続を選択するときに、基本的

<div class="list-item" *ngFor="let con of connectors; let i = index" id="con{{i}}" (click)="connectorSelected(con,i)"> 
       <label class="list-name">{{con.name || "No Available Name"}}</label> 
       <label class="list-desc">{{con.description}}</label> 
</div> 

、それはtypescript関数でtypescriptのconnectorSelectedで強調表示されます。

private connectorSelected(con: ConnectorModel, index: number) { 
     this.removeSelectionOnAllFields(); 
     let selectedElement = document.getElementById("con" + index); 
     selectedElement.className += " selected" 
     this.conStatus = SaveStatus.UptoDate; 
} 

private removeSelectionOnAllFields() { 
    let allClassesHaveSelected = document.getElementsByClassName("selected"); 
    while (allClassesHaveSelected.length) { 
     allClassesHaveSelected[0].classList.remove("selected"); 
    } 
} 

ただし、新しい接続を作成したとき。リストに新しい接続を追加し、その新しく作成された接続を強調表示しようとしましたが、新しく作成された接続がまだHTML5 Webページにレンダリングされていないという問題があります。これにより、配列に追加した新しいコネクタがまだhtmlページに作成されていないため、ページにエラーが発生します。したがって、要素はまだ存在せず、関数全体が実行された後にのみWebページに要素が作成されます。

新しい接続コード：

private newConnector(): void { 

    let newConenctor: ConnectorModel = new ConnectorModel(); 
    this.connectors.push(newConenctor); 
    let index: number = this.connectors.length - 1; 
    this.removeSelectionOnAllFields(); 
    let selectedElement = document.getElementById("con" + index); 
    selectedElement.className += " selected" 
} 

私はこの問題にアプローチすべきだろうか知っていただきたいと思い

？

Answer 1

角度が変化検出をトリガーしないためです。

問題を解決するには、配列をコピーする必要があります。私は私のコメントで言ったように

this.connectors.push(newConenctor); 
this.connectors = this.connectors.slice(0); 

は、そうでなければ私はあなたがディレクティブ[ngClass]、それははるかに簡単に使用することをお勧め、あなたがグローバルドキュメントを使用する必要はありません。

あなたはここにドキュメントを見つけることができます：あなたはディレクティブ[ngClass]のためhttps://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html