*ngFor с class.active
Я зацикливаюсь на div ниже, чтобы создать последовательные вертикальные полосы, как показано на изображении. Я отрегулировал высоту и непрозрачность столбцов на основе индекса массива. Когда компонент загружается впервые, все столбцы окрашиваются в желтый цвет в соответствии с условием [class.rating-type__pipe--active]="i > 1", где i — индекс массива. Вариант использования заключается в том, что когда, скажем, нажимается четвертая полоса, все первые четыре полосы должны быть заполнены. Я попытался написать функцию, которая при нажатии на любой бар, его индекс и все индексы под ним должны иметь активный класс true и выше false, но поскольку компонент уже загружен, он не перезагружает div ниже и, следовательно, не применяет активный класс соответствующим индексам(барам). Как я могу перезагрузить div при каждом щелчке панели, чтобы я мог реализовать эту функциональность применения активного класса только к полосам, которые находятся ниже полосы щелчка и самой панели? Любого намека будет достаточно.
<div class = "rating-type__bar-wrapper rating-type__bar-left">
<div class = "rating-type__pipe" *ngFor = "let opt of arr; index as i" #messageEl [attr.data-option-id] = "opt._id" [class.rating-type__pipe--active] = "i > 1">
<div class = "rating-type__pipe-pillar" (click) = "logMessageId(messageEl)">
<span [ngStyle] = "{'height': (100 - (i * 20))+'%', 'opacity': (1 - (i * 0.2))}" class = "rating-type__pipe-pillar-bg"></span>
</div>
<div class = "rating-type__pipe-text">{{opt.text}}</div>
</div>
</div>
Ответы 1
Вы можете сделать это следующим образом
<div class = "rating-type__bar-wrapper rating-type__bar-left">
<div class = "rating-type__pipe" *ngFor = "let opt of arr; index as i" #messageEl [attr.data-option-id] = "opt._id" id = "rating_id_{{index}}" (click) = "onRatingSelected(index)">
<div class = "rating-type__pipe-pillar" (click) = "logMessageId(messageEl)">
<span [ngStyle] = "{'height': (100 - (i * 20))+'%', 'opacity': (1 - (i * 0.2))}" class = "rating-type__pipe-pillar-bg"></span>
</div>
<div class = "rating-type__pipe-text">{{opt.text}}</div>
</div>
</div>
В .ts
onRatingSelected(clickedIndex: number){
this.arr.forEach((ratingBar, index){
const bar = document.getElementById('rating_id_' + index);
if (index >= clickedIndex) bar.classList.add('rating-type__pipe--active');
else bar.classList.remove('rating-type__pipe--active');
});
}
Не думаю, что это вам сильно поможет, хотя попробовать можно.
Вы можете предоставить stackblitz?