可以使用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] ="width:{{item.percent_position}}%;" 我收到此错误:
未捕获错误:评估不支持报价!声明:{{item.percent_position}}%;

我想要的是这个:

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

Answer 1

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

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

相比之下,以下应该完全正常:

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

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

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

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