我如何将 ngStyle 与插值一起使用

【问题标题】：How do i use ngStyle with Interpolation我如何将 ngStyle 与插值一起使用
【发布时间】：2019-09-09 22:57:30
【问题描述】：

所以在我的应用程序中，有 2 个滑动条输出 1 到 100 之间的值。根据输出，我想将 div 的边距设置为输出的百分比。我尝试了很多东西，谷歌似乎没有回答我的确切问题

所以在 .ts 文件中，我有一个名为“xpos”的变量，它存储滑块的输出。以下代码是我尝试解决我的问题，但它似乎不起作用；

<p [ngStyle]="{margin-left.%: {{xpos}}}">Test</p>

【问题讨论】：

【解决方案1】：

试试这个：

<p [ngStyle]="{'margin-left': xpos+'%'}"> Test </p>

如果您在属性上使用方括号，则不必将变量括在花括号中。

【讨论】：

【解决方案2】：

如果只是单个属性，本例为margin-left，也可以使用[style]：

<p [style.margin-left.%]="xpos">Test</p>

这里有一个example 正在运行。话虽如此，@NorbertBartko 有一个正确的答案。也可以写成：

<p [ngStyle]="{'margin-left.%': xpos}"> Test </p>

希望对您有所帮助！

【讨论】：