时间戳

首页 > 解决方案 > 如何在 Angular 中使用多个值设置 css 属性？

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

问题描述

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

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

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

标签： javascripthtmlcssangularcharts

解决方案

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

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

推荐阅读