在 TS 文件上动态应用 CSS 类

【问题标题】：Apply CSS class dynamically on TS file在 TS 文件上动态应用 CSS 类
【发布时间】：2023-04-03 10:50:02
【问题描述】：

我在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 文件上做到这一点？

【问题讨论】：

标签： css angular typescript sass ionic3

【解决方案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';
}

如果您希望动态设置生成的 html 样式，更简单的方法之一是使用 ElementRef，并且只要您的花费数据发生更改（并且需要更新颜色），请调用获取 elementRef 并更改颜色。关于 Angular、ElementRef 和 querySelector() 方法有很多可靠的 SO 问题/答案，所以我不会在这里放弃它的工作原理。

【讨论】：