如何仅在选定的项目上动态地应用CSS [Angular] [英] How to apply CSS dynamically on selected items only [Angular]
问题描述
我正在学习 Angular
.我从头开始创建了一个自定义 month-picker
.它选择一个月,无日期和无周的范围.我想强调选择的月份范围.您可以想到 primeng
月份选择器,但范围较大.我尝试了
请注意,即使选择的时间范围是从1月到7月,CSS也适用于所有月份.
有什么方法可以将CSS仅应用于选定的 index
数字.因为索引从0到11开始,并且每个月都是固定的.好的,这就是我的想法,对不起,我可能完全错了.请纠正我,并帮助我实施.
您可以在行数组中添加isSelected键.像这样:
矩阵:any = Array.from({length:Math.ceil(this.arr.length/this.n)},(_,i)=>一世).map(i =>this.arr.slice(i * this.n,i * this.n + this.n).map(x =>({monthName:x,isSelected:否})));
不是像这样在html中使用isSelected键:
< div * ngFor =让矩阵行成行" class ="my-table">< span * ngFor =让行数x">< span class ="month-name"(click)="onClick(x); x.isSelected =!x.isSelected" [ngClass] ="{'extraStyle':x.isSelected}">{{x.monthName}}</span></span></div>
I'm learning Angular
. I've created a custom month-picker
from the scratch. It selects a range of months, no dates and no weeks. I wanted to highlight the range of months that'd been selected. You can think of primeng
month picker but with range. I tried this, this and many other solutions but I failed. Here is my code:
monthpicker.component.html
<div class="my-table-div dropdown-content">
...
<br>
<div *ngFor="let row of matrix" class="my-table">
<span *ngFor="let x of row">
<span class="month-name" (click)="onClick(x)" [class.extraStyle]="someProperty">
{{ x }}
</span>
</span>
</div>
</div>
monthpicker.component.ts
...
clickCount: number =0; /*to determine lower bound and upper bound selection*/
someProperty:boolean=false;
flag:boolean= false;
...
arr = [
'Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'JuL', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'
];
...
n = 4;
matrix = Array
.from({ length: Math.ceil(this.arr.length / this.n) }, (_, i) => i)
.map(i => this.arr.slice(i * this.n, i * this.n + this.n));
...
onClick(x) {
this.clickCount++;
console.log("Month: " + x);
if(this.clickCount%2!=0) {
this.lowerMonth= x;
this.lowerYear=this.year;
}
console.log("Year: " + this.lowerYear);
console.log("Clicked "+this.clickCount +" times.");
if(this.clickCount%2==0) {
this.upperMonth=" "+x;
this.upperYear =this.year;
if(this.flag) {
this.someProperty=true;
}
else {
this.someProperty=false;
}
}
}
And here is the css I'm applying monthpicker.component.css
.extraStyle {
background-color: #1474A4 !important;
color: white !important;
text-align: center !important;
}
And here is the result:
See, CSS is applied to all the months even though the selection is from Jan to Jul only.
Is there any way that I can apply css to selected index
numbers only. Because index is starting from 0 to 11 and is kind of fixed for each month. Ok, This is what I thought, I'm sorry I may be completely wrong. Please correct me and help me implement that.
You can add isSelected key in row array. Like this :
matrix: any = Array.from(
{ length: Math.ceil(this.arr.length / this.n) },
(_, i) => i
).map(i =>
this.arr.slice(i * this.n, i * this.n + this.n).map(x => ({
monthName: x,
isSelected: false
}))
);
than use the isSelected key in html like this :
<div *ngFor="let row of matrix" class="my-table">
<span *ngFor="let x of row">
<span class="month-name" (click)="onClick(x); x.isSelected = !x.isSelected" [ngClass]="{'extraStyle' : x.isSelected }">
{{ x.monthName }}
</span>
</span>
</div>
这篇关于如何仅在选定的项目上动态地应用CSS [Angular]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!