单击时在html中的三个图标之间切换
单击时在html中的三个图标之间切换
提问于 2018-08-08 03:06:57
我有一个按钮，与每一次点击-图标将改变。该按钮有向下箭头、向后箭头、停止图标。什么是最好的方式来处理按钮，以便每次点击时，图标都会改变。
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.
}回答 1
Stack Overflow用户
发布于 2018-08-08 03:32:55
您可以使用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';
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51733803
复制相关文章
相似问题