如何在 Angular 中使用多个值设置 css 属性？答案

【问题标题】：How to set css property using multiple values in Angular?如何在 Angular 中使用多个值设置 css 属性？
【发布时间】：2021-04-15 17:41:43
【问题描述】：

我有一些统计数据，例如票数和总票数。我想通过使用一些图表来显示这些数据，如下所示，我需要使用它的样式来设置宽度属性。

<div class="progress-bar" style="width: 80%"></div>

由于此栏按百分比显示 count 和 totalCount 值，我需要使用 ticketCount / totaTicketCount 值设置宽度值。例如 20 / 100 并将条形显示为填充的 20%。那么，在 Angular 中设置它的正确方法是什么？我尝试了calc() 方法，但无法使其工作，我不确定是否有更好的方法来做到这一点。

【问题讨论】：

标签： javascript html css angular charts

【解决方案1】：

我认为添加 [ngStyle] 应该会有所帮助：

<div style="background-color: black; width: 100%"  
    [ngStyle]="{'width':ticketCount / totalTicketCount+'%'}"></div>

【讨论】：

谢谢，但如果我使用数字，它可以工作 ([ngStyle]="{'width': '50%'}")，如果我使用变量就不行。有什么想法吗？
对解决方案有任何想法吗？ .
我认为这是因为chart js的初始化是先加载的，并且在初始化之后没有看到你的变量。尝试在构造函数或oninit () 中设置变量可能对您有所帮助。

【解决方案2】：

您可以使用ngStyle

<div class="progress-bar" [ngStyle]="{'width': ticketCount / totaTicketCount +'%'}">
</div>

【讨论】：

@Fredrick 这样做没用.. 它应该可以工作。