html - 如何在Angular中更正以下表达式

Question

我想在 ngStyle 中设置动态宽度。我怎样才能正确地写出表达式。

[ngStyle]="{{'width': 'calc(chargeStation.response[1].width+'%' - 1+'px')' }}"

我已经改为

[ngStyle]="{'width': 'calc('+ chargeStation.response[1].width +'%'+ ')'}"

比在 HTML 中它作为对象

ng-reflect-ng-style="[object Object]"

标签： htmlcssangulartypescript

Answer 1

您可以尝试以下解决方案，它对我有用。

在模板文件 (.html) 中

<button [ngStyle]="{'width': 'calc(' + chargeStation.width + '% - 1px)'}" (click)="buttonClick()">click</button>

在组件文件 (.ts) 中

你必须在 ts 文件中为你的对象赋值例如我有带有 width 属性的 chargeStation 对象。属性值 100。

chargeStation = {
    width: 100
  };