Динамически изменять высоту стиля 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

Спасибо всем за помощь! То, что работало для меня, было:

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

с:

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

Я почти уверен, что некоторые из вас сработали бы, но просто сообщаю вам, если у кого-то возникнут похожие проблемы позже! Такая легкая вещь застряла на несколько часов! Спасибо всем!

Answer 2

Выезд ngStyle

Обновление стилей элементов HTML.

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

Ваше значение будет выглядеть следующим образом, где каждое число представляет собой percent: sortedUsers$[i].points = 100 // Percent

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.

Вы можете сделать это block element или inline-block, и тогда он примет ваш рост и ширину.

Подробнее читайте здесь: Разве высота и ширина не относятся к размаху?