Question

我正在尝试更改HTML中某些字母的颜色，并需要根据一些真实的信息对其进行更改。它们基于一个变量信息进行更改，但是我想向同一颜色选项添加更多变量，因此我需要一个数组。本质上，我有average1，average2和colorOption。如果average1小于50，它将为红色；但是，如果average2大于100，它将变为红色。

这是我的代码。

HTML：

<div class="box">
  <canvas 
  class="offset"
  id="Chart4" 
  width="240"
  height="180" 
  ></canvas> 

  <h1 class = "fontStyleHole">
    <h1 [ngStyle]="{'color': colorOption}">
      {{averag1}}
    </h1>
  </h1>
</div>

<div class="box">
  <canvas 
  class="offset"
  id="Chart5" 
  width="240"
  height="180" 
  ></canvas> 

  <h1 class = "fontStyleHole">
    <h1 [ngStyle]="{'color': colorOption}">
      {{average2}}
    </h1>
  </h1>
</div>

TypeScript当前：

if(this.average2 >= 55){            
  this.colorOption="#FF2A00"
}
else if(this.average2 >= 50){
  this.colorOption='#EB9E00'
}
else if(this.average2 >=45){
  this.colorOption="#C6EB00"
}
else{
  this.colorOption='#04FF00'
}

if(this.average1 >= 280){

  this.colorOption="#FF2A00"
}
else if(this.average1 >= 250){

  this.colorOption='#EB9E00'
}
else if(this.average1 >=220){
  this.colorOption="#C6EB00"
}
else{
  this.colorOption='#04FF00'
}

我想要的打字稿：

    if(this.Classyaverage >= 55){            
  this.colorOption[1]="#FF2A00"
}
else if(this.Classyaverage >= 50){
  this.colorOption[1]='#EB9E00'
}
else if(this.Classyaverage >=45){
  this.colorOption[1]="#C6EB00"
}
else{
  this.colorOption[1]='#04FF00'
}

if(this.average1 >= 280){

  this.colorOption[2]="#FF2A00"
}
else if(this.average1 >= 250){

  this.colorOption[2]='#EB9E00'
}
else if(this.average1 >=220){
  this.colorOption[2]="#C6EB00"
}
else{
  this.colorOption[2]='#04FF00'
}

Answer 1

这是一个样式问题，所以也许您应该尝试一种样式解决方案。动态应用类比显式计算DOM样式属性值要容易得多。

component.html：

 <h1 [ngClass]="{
  'color-blue': condition,
  'color-green': !condition,
  'color-yellow': condition && anotherCondition,
  }>

组件样式表：

.color-blue {
  color: blue;
}
.color-green {
  color: green;
}
etc...

来自可信作者的奖励博客文章： https://ultimatecourses.com/blog/ng-class-angular-classes

我可以创建可以在ngStyle或ngClass中使用的数组吗？

1 个答案: