从数组中获取值并将颜色返回到[style.backgroundColor]-Angular 2+；

我想检查div的值，如果该值是

，

50）{
返回“#4B8A08”；
}否则，如果（百分比40）{
返回“#FFBF00”；
}否则，如果（百分比<40）{
返回“FF8000”；
}
}

---

我只得到一个数字，可能是因为

[0]

但是如果我删除

[0]

我会得到错误，在HTML中我使用带索引的*ngIf来获得值，工作正常，但是在组件中我必须做什么？

您的函数应该是这样的。您的

百分比

变量字符串。您需要转换为整数

public getColor(): string {
        const percent = +this.squad.squadPeople[0].person.peopleSkills[0].percentValue;
        if (percent > 50) {
          return '#4B8A08';
        } else if (percent <= 50 && percent > 40) {
          return '#FFBF00';
        } else if (percent < 40) {
          return '#FF8000';
        }
  }

public getColor（）：字符串{
常量百分比=+this.squad.squadPeople[0]。person.peopleSkills[0]。百分比值；
如果（百分比>50）{
返回“#4B8A08”；
}否则，如果（百分比40）{
返回“#FFBF00”；
}否则，如果（百分比<40）{
返回“FF8000”；
}
}

您的函数应该是这样的。您的

百分比

变量字符串。您需要转换为整数

public getColor(): string {
        const percent = +this.squad.squadPeople[0].person.peopleSkills[0].percentValue;
        if (percent > 50) {
          return '#4B8A08';
        } else if (percent <= 50 && percent > 40) {
          return '#FFBF00';
        } else if (percent < 40) {
          return '#FF8000';
        }
  }

public getColor（）：字符串{
常量百分比=+this.squad.squadPeople[0]。person.peopleSkills[0]。百分比值；
如果（百分比>50）{
返回“#4B8A08”；
}否则，如果（百分比40）{
返回“#FFBF00”；
}否则，如果（百分比<40）{
返回“FF8000”；
}
}

公共getColor（百分比：字符串）：字符串{
百分比=+百分比
如果（百分比>50）{
返回“#4B8A08”；
}否则，如果（百分比40）{
返回“#FFBF00”；
}否则，如果（百分比<40）{
返回“FF8000”；
}
}

和html格式

<div [style.backgroundColor]="getColor(groupNumbers.person.peopleSkills[0].percentValue)">{{groupNumbers.person.peopleSkills[0].percentValue}}</div>

{{groupNumbers.person.peopleSkills[0].percentValue}

公共getColor（百分比：字符串）：字符串{
百分比=+百分比
如果（百分比>50）{
返回“#4B8A08”；
}否则，如果（百分比40）{
返回“#FFBF00”；
}否则，如果（百分比<40）{
返回“FF8000”；
}
}

和html格式

<div [style.backgroundColor]="getColor(groupNumbers.person.peopleSkills[0].percentValue)">{{groupNumbers.person.peopleSkills[0].percentValue}}</div>

{{groupNumbers.person.peopleSkills[0].percentValue}