如何使用组件中的变量在角度样式绑定中使用 css calc()

【问题标题】：How to use css calc() in angular style binding using variables from the component如何使用组件中的变量在角度样式绑定中使用 css calc()
【发布时间】：2021-05-16 03:00:09
【问题描述】：

如何使用 Angular 样式绑定语法和 css calc() 函数来动态设置元素的 width。

使用 React 我可以简单地写：-

<div style = {{
   width: `calc((${currentStep - 1 } * (100% / ${steps - 1})) - 6px)`
}}>

</div>

使用 Angular 我想完成同样的事情：-

<div
[style.width] = `calc((${currentStep - 1 } * (100% / ${steps - 1})) - 6px)`
>
  
</div>

【问题讨论】：

感谢@AbuSufian，这也不起作用。

标签： css reactjs angular

【解决方案1】：

你可以试试这样的：

[style. width]="getWidth(currentStep, steps)"

【讨论】：

谢谢 Yugi，这也不起作用，这种方法如何与 ngStyle 一起使用。但问题是我想使用 [style.width[] 方法，而我的类文件中没有方法
这在 Angular 中是不可能的，你不能使用 [..]={{..}} 见：stackoverflow.com/questions/40203279/…
不过，您可以使用style.width="stuff with {{}}"；这只是您不能使用的 [bracket] 语法。但是由于你不能使用内置的calc，它并没有真正的帮助。