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>"
  }

<强>旧

如果在component.ts中生成HTML，您只需将其添加到样式中，但不会动态更改。

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

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

如果您希望动态设置生成的html样式，更简单的路线之一就是使用ElementRef，并且每当您的spentData更改（并且需要更新颜色）时，都会调用获取elementRef的方法并更改颜色。关于Angular，ElementRef和querySelector（）方法有很多可靠的SO问题/答案，所以我不会放弃它的工作原理。

在TS文件上动态应用CSS类

1 个答案: