我正在嘗試更改所選專案的背景顏色。這些專案被回圈到
建構式 在我的建構式中，我有以下內容。
this.isSelected = false;
這是模板。
<div>
<ul>
<li *ngFor="let item of items; let i=index">
<span
(click)=onSelect(item)
class="text-white"
[ngClass]="isSelected ? 'bg-blue-300': 'bg-red-300'">
{{ item }}
<span>
</li>
</ul>
</div>
在組件.ts
我有以下代碼。在這里，我試圖在未單擊專案時將 isSelected 狀態重置為 false。
public setIcon(item: string): any {
for( let myItem of this.items){
if(myItem === item){
return this.isSelected = !this.isSelected;
}else {
return this.isSelected = false;
}
}
}
uj5u.com熱心網友回復：
如果您希望一次只選擇一個專案，請使用變數“selectedIndex” number（如果沒有選擇專案，則為-1）
selectedIndex:number=-1;
<span
(click)="selectedIndex=selectedIndex==i?-1:i"
[ngClass]="selectedIndex==i? 'bg-blue-300': 'bg-red-300'">
</span>
如果您想一次選擇一個或多個專案，則需要宣告一個布爾陣列
selected:boolean[]=[];
<span
(click)="selected[i]=!selected[i]"
[ngClass]="selected[i]? 'bg-blue-300': 'bg-red-300'">
</span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/516434.html
標籤：有角度的