使用 Angular 8 在 ngStyle 中将数字转换为度数

Question

{{result.percentage}} 给我一个从 0 到 100 的数字。

如果我得到 25，我希望它转换为 -45 度，或者如果我得到 0，我希望它转换为 -90 度，如果我得到 75，则它转换为 45 度。

[ngStyle]="{'transform': 'rotate(' + result.percentage + 'deg)'}"

当前，这给出了输出 style="transform: rotate(25deg);"，我想将其转换为 style="transform: rotate(-45deg);"

我该怎么做？

仅供参考，我需要绑定这个速度计的数据：https://jsfiddle.net/bcgzrdfL/

Answer 1

看来您需要的是数学高手，而不是框架专家，不过我会试一试答案：

[ngStyle]="{'transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'}"

Answer 2

是这样的吗？

html

[ngStyle]="{'transform': 'rotate(' + convertedPercentage + 'deg)'"

分量

get convertedPercentage() {
  return (this.result.percentage * 1.8) - 90;
}

Answer 3

从性能的角度来看，最好只在需要计算值时才计算值，而不是在模板中进行数学运算。

styles = {}

setStyles(percentage) {
   this.styles = {
     'transform': 'rotate(' + ((percentage * 1.8) - 90) + 'deg)'
   }
}

当你得到/分配你的结果或改变你的百分比时调用它，然后在模板中使用：

[ngStyle]="styles"

按照您现在的方式，度数是在每个变化检测周期计算的，而不是仅在需要时才计算。这是一种不好的做法，如果您继续这样做，会导致应用性能不佳。

Convert number to degrees in ngStyle using Angular 8