Динамическое изменение высоты стиля CSS
Я делаю лидборд пользователей:
<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, но также не удалось.
Да, это работает, но мне нужно изменить значение 100 на все, что входит в цикл, и это не сработает. как и для элемента [1] это должно быть 80, для элемента [1] 20 и т. д.
Вы уже сделали span как блочный или строчно-блочный элемент?
Ответы 5
К span нельзя применить высоту и ширину.
Вы можете сделать его block element или inline-block, и тогда он будет принимать вашу высоту и ширину.
Подробнее здесь: Не применимы ли высота и ширина к пролету?
inline-block больше подходит для промежутков (поскольку обычно используется как контекстная упаковка встроенных элементов), тогда как div лучше всего подходит для блочного элемента DIVisor.
Это можно решить в соответствии с потребностями, но я обновил ответ, чтобы дать больше ясности :)
Не знаю, заметили ли вы, но у вас есть пробел между {{sortedUsers$[i].points}} и %;, он должен быть таким, без пробела
<span style = "height: {{sortedUsers$[i].points}}%;">
Использовать привязку атрибута стиля
<span [style.height] = "sortedUsers$[i].points">
<i></i>
<b>{{sortedUsers$[i].points}}</b>
</span>
Где значение может быть это sortedUsers$[i].points = "100%"
Проверить ngStyle
Update an HTML element styles.
<span [ngStyle] = "{'height': `${sortedUsers$[i].points}%`}"></span>
Ваше значение будет выглядеть следующим образом, где каждое число представляет собой percent: sortedUsers$[i].points = 100 // Percent.
Спасибо за вашу помощь! Для меня сработало:
<span class = "user" [ngStyle] = "{ 'height': getPoints(i)}">
<i></i>
<b>{{sortedUsers$[i].points}}</b>
</span>
с участием:
getPoints(id) {
return this.sortedUsers$[id].points + '%';}
Я почти уверен, что некоторые из ваших тоже сработали бы, но просто сообщаю вам, если у кого-то позже возникнет похожая проблема! Такая легкая вещь заставила меня застрять на несколько часов! Спасибо вам всем!
По моему личному мнению, вы также можете использовать строку шаблона для более аккуратного синтаксиса: getPoints(id) { return `${this.sortedUsers$[id].points}%`;}
<span style = "height: 100px;">работал? если нет, измените отображение на блок или встроенный блок