单击时在 html 中的三个图标之间切换

Question

我有一个按钮，每次点击都会改变图标。该按钮有下一个箭头、后退箭头、停止图标。处理按钮的最佳方式是什么，所以每次点击图标都会改变。

HTML：

 <button (click)="toggleBtn()">
      <span *ngIf="selectedIcon='left'" class="icon-left"></span>
      <span *ngIf="selectedIcon='right'" class="icon-right"></span>
      <span *ngIf="selectedIcon='stop'" class="icon-stop"></span>
    </button>

组件：

 public ngOnInit() {
        this.selectedIcon="Both"; //default selection to display to user.
    }

 public toggleBtn(){
   // how should i handle the toggle? User a for loop in my component or switch? 
   // what would be the ideal way of achieving this. 
 }

Answer 1

使用余数运算符。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()

//in your .ts declare a variable index
index:number=0;

//in your .html
<button (click)="index=(index+1)%3">
<span [ngClass]="{'icon-left':index==0,'icon-right':index==1,'icon-stop':index==2}">

更新 如果您有多个项目，则需要多个变量。通常你可以有一个对象数组 [{item:'uno',index:0}{item:'dos',index:0}..]。在 *ngFor="let item of myArray"> 中，将“index”替换为“item.index”

//In your .ts
myArray:any[]=[{desc:'uno',index:0},{desc:'dos',index:0}..];

//If you have an array of object but you don't have the property "index"
//You always can "map" the array to add the property
//e.g
anotherArray=["uno","dos"];

//transform the array
this.anotherArray=thia.anotherArray.map(x=>return{
       desc:x,
       index:0
})

<button *ngFor="let item of my array" (click)="item.index=(item.index+1)%3">
   <span [ngClass]="{
            'icon-left':item.index==0,
            'icon-right':item.index==1,
            'icon-stop':item.index==2}">{{item.desc}}
</button>

更新两个 我们可以有不同的按钮，但不能在 *ngFor 中，为此，使用索引数组

//in ts
index:number[]=[0,0]
//in .html
<!--for the first button we use index[0]-->
<button (click)="index[0]=(index[0]+1)%3">
   <span [ngClass]="{
            'icon-left':index[0]==0,
            'icon-right':index[0]==1,
            'icon-stop':index[0]==2}">
</button>
<hr/>
<!--for the second button we use index[1]-->
<button (click)="index[1]=(index[1]+1)%3">
   <span [ngClass]="{
            'icon-left':index[1]==0,
            'icon-right':index[1]==1,
            'icon-stop':index[1]==2}">
</button>
<hr/>

Answer 2

可以使用ngClass属性绑定。

<button (click)="toggleBtn(selectedIcon)" [ngClass]="[selectedIcon=='left' ? 'icon-left' : '',  selectedIcon=='right' ? 'icon-right' : '', selectedIcon=='stop' ? 'icon-stop' : '']">

内部组件：

selectedIcon;

toggleBtn(_sIcon){
   if(!_sIcon){
     this.selectedIcon = 'left';
   }else if(_sIcon === 'left){
     this.selectedIcon = 'right';
   }else if(_sIcon === 'right){
     this.selectedIcon = 'stop';
   }else if(_sIcon === 'stop){
     this.selectedIcon = 'left';
   }
}