获取值数组并返回[style.backgroundColor] - Angular 2+

Question

我想检查div的值，如果值是>，<和===将颜色返回到[style.backgroundColor]。

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

我只得到一个数字，因为[0]，但如果我删除[0]我得到错误，在HTML中我使用* ngIf索引来获取值并且工作正常，但在组件中我必须做什么？

Answer 1

public getColor(percent:string): string {
        percent = +percent
        if (percent > 50) {
          return '#4B8A08';
        } else if (percent <= 50 && percent > 40) {
          return '#FFBF00';
        } else if (percent < 40) {
          return '#FF8000';
        }
  }

并在HTML中

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

Answer 2

你的功能应该是这样的。你的percent变量字符串。你需要转换成整数。

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';
        }
  }