代码之家 › 专栏 › 技术社区 › bluePearl

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

angular html javascript

bluePearl · 技术社区 · 6 年前

我有一个按钮,每次点击-图标将改变。按钮有下一个箭头、后箭头、停止图标。处理按钮的最佳方法是什么,这样每次点击图标都会改变。

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. 
 }

2 回复 | 直到 6 年前

Eliseo 6 年前

使用余数运算符。 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}..]。在a*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>

更新2 我们可以使用不同的按钮,但不能在*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/>

Suresh Kumar Ariya 6 年前

可以使用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';
   }
}