Question

我正在制作用户'leaderbord：

pip install -r requirements.txt

每个<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}}

也使用jQuery实现它，但也失败了。

Answer 1

高度和宽度无法应用于span。

您可以将其设为block element或inline-block然后它会接受您的身高和宽度。

在此处阅读更多内容：Does height and width not apply to span?

Answer 2

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

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

Answer 3

查看ngStyle

更新HTML元素样式。

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

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

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 + '%';}

我很确定你们中的一些人也会工作，但只是让大家都知道以后有人会遇到类似的问题！这么容易让我陷入困境数小时！谢谢大家！

动态更改CSS样式高度

5 个答案: