Javascript document.getElementById（{IDHERE}）.style.color在更改选项卡时不工作

我在有两个选项卡的页面上显示百分比。百分比位于页面最初打开时的选项卡上

我的JS非常简单：

  adaPercentColor(percent, ada) {
    if (ada === 0) {
      document.getElementById('ada').style.color = 'red';
    } else if (percent <= 1 && percent >= .95) {
      document.getElementById('ada').style.color = 'green';
    } else if (percent <= .94 && percent >= .85) {
      document.getElementById('ada').style.color = 'yellow';
    } else {
      document.getElementById('ada').style.color = 'red';
    }
  }

adaPercentColor（百分比，ada）{
如果（ada==0）{
document.getElementById（'ada'）.style.color='red'；
}其他条件（百分比=0.95）{
document.getElementById（'ada'）.style.color='green'；
}否则，如果（百分比=0.85）{
document.getElementById（'ada'）.style.color='yellow'；
}否则{
document.getElementById（'ada'）.style.color='red'；
}
}

下面是HTML（使用Angular框架）：

{{rows.ada}

---

这在一开始是有效的，但当我在选项卡之间切换时，颜色会变回黑色。我在一个fetchData（）方法中调用JS部分，该方法在ngOnInit（）中调用。

我建议不要在angular框架中使用这样的纯JS。您可以使用类似于

{{rows.ada}}

的东西，然后myColor将成为组件中的公共变量。然后可以如下方式更新变量：

adaPercentColor() {
  if (ada === 0) {
    this.myColor = 'red';
  } ...and so on
}

---

通过更改检测，只要变量更新，视图就会自动更新。希望百分比不是

.9400001

为什么要使用DOM更新？

adaPercentColor() {
  if (ada === 0) {
    this.myColor = 'red';
  } ...and so on
}