动态更改 CSS 样式高度

Question

我正在制作用户的领导者：

<div class="user">
<ul id="jogadores" *ngFor="let u of sortedUsers$; let i=index;" (click)="routeToUser(u.id)">
<li class="user">
<img class="gravatar" src="https://www.gravatar.com/avatar/{{u.imgUrl}}?d=https://www.1plusx.com/app/mu-plugins/all-in-one-seo-pack-pro/images/default-user-image.png" />
<div class="progressBar">
<span style="height: 100%;">
<i></i>
<b>{{sortedUsers$[i].points}}</b>
</span>
</div>
<span class="username">
<strong>{{sortedUsers$[i].username}}</strong>
</span>
</li>
</ul>
</div>

每个<ul>元素都有一些来自数组的值。整个晚上我一直在尝试将<span style="height: 100%;">值更改为{{sortedUsers$[i].points}}的某个值，因此每个进度条都会根据用户拥有的分数而变化。我尝试传递值：

<span style="height: {{sortedUsers$[i].points}} %;">

也用jQuery到达它，但也失败了。

Answer 1

查看 ngStyle

更新 HTML 元素样式。

<span [ngStyle]="{'height': `${sortedUsers$[i].points}%`}"></span>

您的值如下所示，其中每个数字代表一个percent: sortedUsers$[i].points = 100 // Percent

Answer 2

高度和宽度不能应用于span。

你可以把它设为block element或inline-block，然后它会接受你的高度和宽度。

在这里阅读更多： 高度和宽度不适用于跨度吗？

Answer 3

我不知道你是否注意到了，但是你在{{sortedUsers$[i].points}}和%;之间有一个空格，它应该是这样的，没有空间

<span style="height: {{sortedUsers$[i].points}}%;">

Answer 4

使用样式属性绑定

<span [style.height]="sortedUsers$[i].points">
<i></i>
<b>{{sortedUsers$[i].points}}</b>
</span>

值可以是此sortedUsers$[i].points = "100%"

Answer 5

谢谢大家的帮助！对我有用的是：

<span class="user" [ngStyle]="{ 'height': getPoints(i)}">
<i></i>
<b>{{sortedUsers$[i].points}}</b>
</span>

跟：

getPoints(id) {
return this.sortedUsers$[id].points + '%';}

我很确定你们中的一些人也会起作用，但如果以后有人遇到类似的问题，请让大家知道！这么简单的事情让我卡了几个小时！谢谢大家！