可以使用Angular 4中的插值将值添加到内联样式

Question

我自己学习角度4，我想知道是否可以这样做：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-
valuemin="0" aria-valuemax="100" style="width {{ item.percent_position}}%;">
{{ item.percent_position }}</div>
</div>

我想要实现的是扩展相对于 {{item.percent_position}}

引发的值的宽度

当我使用 [style] =＆＃34; width：{{item.percent_position}}％;＆＃34; 时出现此错误：
未捕获错误：评估不支持报价！         声明：{{item.percent_position}}％;

我想要的是：

我上面的代码得到的结果是这样的：

Answer 1

当你使用方括号时，你绑定到一个表达式，所以你建议的解决方案不起作用，因为Angular期望这是可执行的JS：

 [style]="width: {{ item.percent_position }}%;"

相比之下，以下内容应该完美无缺：

 [style.width]="item.percent_position + '%' "

如果要绑定多个样式，可以使用ngStyle绑定到对象：

 [ngStyle]="{ 'width': item.percent_position + '%' }"

在任何情况下：如果使用方括号，请确保绑定到它的是可执行表达式！

Answer 2

我发现样式不起作用，但是，我可以添加一个自定义类并调用该类。例如：

<div class="{{ item.className }}">

希望这对阅读此页面的人有所帮助。

Answer 3

  

您可以使用[ngStyle]代替样式。   <div [ngStyle]="{'width':cointinerWidth}"></span>

Answer 4

[ngStyle] =“ {'background'：variable}”

就像我在使用标签的情况下一样

测试

，其中color是组件提供的变量。