Angular使用NgStyle的calc计算不同单位变量设置div宽度不生效

• calc()是CSS专属语法，不属于JS/TS语法，你当前的写法会直接在模板的表达式执行阶段尝试调用不存在的calcJS方法，根本不会传到CSS层解析
• 就算要拼接CSS的calc规则，也需要保证最终传给width的是完整的合法CSS字符串，且calc内部的减号前后必须保留空格，否则CSS会识别失败
• 你当前的字符串拼接逻辑也有问题，会直接在JS层把数字、百分号、减号、像素单位直接拼合运算，完全不符合预期

直接把整个calc规则作为字符串拼接好传给width属性即可，原生CSS的calc本身就支持百分比和像素的跨单位计算：

模板字符串写法（推荐） #

[ngStyle]="{ 'width': `calc(${notHedgedProgress}% - ${newPositionX}px)` }"

普通字符串拼接写法 #

如果项目环境不支持模板字符串，可以用加号拼接：

[ngStyle]="{ 'width': 'calc(' + notHedgedProgress + '% - ' + newPositionX + 'px)' }"

假设notHedgedProgress取值为70，newPositionX取值为30，最终生成的CSS属性为width: calc(70% - 30px)，完全符合CSS的calc语法要求，会自动计算出父元素宽度的70%减去30像素的最终值作为div宽度。

注意：calc内部的减号前后的空格不可省略，若写成calc(70%-30px)会被CSS判定为无效语法。

内容的提问来源于stack exchange，提问作者Castle