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

【问题标题】：It is possible to add values to an inline style using interpolation in Angular 4可以使用 Angular 4 中的插值将值添加到内联样式
【发布时间】：2018-05-19 15:42:25
【问题描述】：

我正在自学 Angular 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}}%;

我想要的是这个：

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

【问题讨论】：

使用[style] 绑定或[NgStyle]
喜欢

标签： html css angular bootstrap-4

【解决方案1】：

[ngStyle]="{'background': 变量}"

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

测试

其中颜色是组件提供的变量。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

相比之下，以下应该可以正常工作：

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

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

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

无论如何：如果您使用方括号，请确保绑定到它的是可执行表达式！

【讨论】：

如何添加两个行内类（位置：绝对）和（顶部：值）