我可以在[style.width]指令中使用像'calc'这样的表达式吗？

Question

是否可以在angular的[style.width]指令内的calc（）中使用我的变量？

类似这样的东西：

<div [style.width.px]="calc(100% - myWidth)">some texts </div>

Answer 1

是的

TS：

myWidth: string = '100px';

HTML：

<div [style.width]="'calc(100% - ' + myWidth + ')'">some texts </div>

Answer 2

您还可以在.ts文件中声明样式对象：

mywidth = 20;
styleObj = {width: `calc( 100% - ${this.mywidth}px)`};

并将其放入您的html中：

<div [ngStyle]="styleObj">some texts </div>