TSファイルのCSSクラスを動的に適用する

Question

tsファイルにインラインHTMLコンテンツがあります。

"<div style=\"font-size: 20px;\">" + remainingAmount.toLocaleString() + "</div>" 

ここで条件に応じてcolor: redを適用する必要があります。

すなわちif(this.isSpentOver) color:red else default

私は以下のようなHTMLファイルでこれを行うことができます。

[ngClass]="{'color-red': isSpentOver}" 

しかし、どのように私はtsファイルにそれを行うことができますか？

Answer 1

更新：

.TS

myMethod(){ 
    if (spent > totalBudget) { 
      this.color = "red"; 
     } 
    } 

showChart(){ 
     "<div style=\"font-size: 20px;color:" + this.color + "\">" + 
         remainingAmount.toLocaleString() + "</div>" 
    } 

旧

HTMLをあなたのcomponent.tsあなたは、単にそこスタイリングにそれを追加することができますで生成されている場合は、それ動的に変更されません。

myInnerHtml = "<div style=\"font-size: 20px;color: " + this.isSpentOver() + "\">" + remainingAmount.toLocaleString() + "</div>" 

isSpentOver(): string { 
    (this.spentData)? return 'red': return 'initial'; 
} 

あなたが取得するメソッドを呼び出して、動的にスタイルが簡単にルートの1つは、ちょうどElementRefとあなたのspentDataの変更（と色を更新する必要がある）の任意の時間を使用することで、HTMLを生成するために探しているならelementRefを呼び出して色を変更します。 Angular、ElementRef、およびquerySelector（）メソッドには、多くのソリッドな質問/回答がありますので、ここでその動作をどうやって削除するかは決してしません。