英文:
CSS: Pass a variable in nth-child with angular
问题
我想将来自模型ts的变量传递给nth-child，但我不知道如何做。
现在我的代码看起来像这样：
ts模型：
@Input() public limit: number
scss：
.collapsed-list {
max-height: 15rem;
overflow: hidden;
.expandable:nth-child(${limit}) {
color: red;
}
}
感谢您的帮助。
英文:
I want to pass a variable that comes from the model ts into a nth-child, but I don’t know how to do this.
For now my code looks like this:
ts model:
@Input() public limit: number
scss:
.collapsed-list {
max-height:15rem;
overflow: hidden;
.expandable:nth-child(${limit}) {
color: red;
}
}
Thanks for help
答案1
得分: 1
一个解决方法是在计数器等于限制时从模板中添加一个类。
.max {
color: red;
}
<div class="collapsed-list" *ngFor="let index of counter; let index">
<div [class]="index === limit ? 'max' : ''">
</div>
请注意，我已经为代码中的HTML和CSS进行了适当的翻译，不包括代码部分。
英文:
A workaround is to add a class from the template when counter === limit.
.max {
color: red;
}
<div class="collapsed-list" *ngFor=" counter; let index ">
<div [class]="index === limit ? 'max' : ''"
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论