我有動態生成的按鈕。單擊任何一個按鈕時，我希望根據激活的按鈕來更改按鈕的 css。
我的代碼：
HTML：
<div class="container">
<div class="scroll" scrollX="true">
<span *ngFor="let item of buttons; let i = index" (click)="genreSelect(item)"
><ion-button shape="round" [ngClass]="{activated: buttonActive}">{{item.catName}}</ion-button></span
>
</div>
TS：
this.buttons = [{
id: 1,
catName:'Electronics'
},{
id: 2,
catName:'Books'
},{
id: 3,
catName:'Furniture'
},{
id: 4,
catName:'Laptops'
}];
genreSelect(item){
console.log(item);
this.buttonActive = true;
}
CSS：
.activated:active{
background-color: red;
}
CSS 閃爍一秒鐘然后消失。
如果按鈕被激活，我怎樣才能使 CSS 在那里。
uj5u.com熱心網友回復：
您可以使用索引作為您選擇的按鈕：
<div class="container">
<div class="scroll" scrollX="true">
<span *ngFor="let item of buttons; let i = index (click)="genreSelect(item, i)">
<ion-button shape="round" [ngClass]="activeIndex == i ? 'buttonActive': ''">
{{item.catName}}
</ion-button>
</span>
</div>
</div>
.ts：
activeIndex = null;
genreSelect(item, index){
this.activeIndex = index;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411210.html
標籤：