Question

我的*ngFor中有很多按钮，我希望当某人单击某个按钮时-它变为活动状态（它成为活动类）。

我所做的：

HTML：

<button 
  [ngClass]="{'activeBtn': buttActive }" 
  (click)="addDistrict(item);changeActive(i)" 
  *ngFor="let item of items; let i = index" 
  ion-button 
  #disable>
  {{item.name}}
</button>

TS：（将所有按钮类别更改为活动状态（我只想更改单击的那一个按钮）

buttActive = false;
changeActive(i) {
  console.log(i);
  this.buttActive = !this.buttActive;
}

Answer 1

在对象中具有buttActive属性并进行更改

button [ngClass]="{'activeBtn': item.buttActive }"  (click)="addDistrict(item);changeActive(item,i)"  
*ngFor="let item of items; let i = index"     ion-button #disable>{{item.name}}</button>


 changeActive(item, i){
    console.log(i);
    item.buttActive = !item.buttActive;
  }

Answer 2

如果不想在每个项目上都创建一个属性，则在Component类中创建一个lastClickedIndex属性，并使用单击的按钮的索引进行设置：

lastClickedIndex;
changeActive(i) {
  this.lastClickedIndex = i;
}

然后在您的模板中，检查基于lastClickedIndex的{{1}}按钮以应用index类。

activeBtn

这样，您就不必在每个item对象上创建属性。单击某些其他按钮时，这还将有助于从先前选择的按钮中删除班级。

这是您推荐的StackBlitz。

Angular 2更改ngFor items类，仅知道其索引

2 个答案: