代码之家 › 专栏 › 技术社区 › vedankita kumbhar

在Angular2中的两个按钮之间切换类

angular4-forms angular2-forms angular5 button html

0

vedankita kumbhar · 技术社区 · 8 年前

我用的是角度2,我有两个按钮,我想在两个按钮之间切换类,但。下面是我的代码

<button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
                                    <i class="fa fa-long-arrow-up"></i>
                                </button>
                                <button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
                                    <i class="fa fa-long-arrow-down"></i>
                                </button>

我的问题是我想切换类,但一次只有一个按钮可以选择,其他条件是两个按钮都可以取消选择。单击一个按钮时,应取消选择其他按钮,单击选定按钮后,应取消选择该按钮,我只想使用按钮来完成此操作。请帮忙

1 回复 | 直到 8 年前

1

mahi-man 8 年前

您可以使用此模式,它可以用于任意数量的按钮:

在控制器中,设置一组按钮和 selectedButton 变量

buttons= [
  {class: "fa fa-long-arrow-up", name: "button1"},
  {class: "fa fa-long-arrow-down", name: "button2"},
]
selectedButton;
toggleSelect(button) {
    if (button == this.selectedButton) {
        this.selectedButton = undefined
    } else {
        this.selectedButton = button
    }
}

然后在模板中填充 选择按钮 单击,并根据是否选中该类来设置该类

<button *ngFor="let button of buttons" class="btn rounded" [ngClass]="(selectedButton == button) ? 'btn-primary' : 'btn-default'" (click)="toggleSelect(button)">
    <i [class]="button.class"></i>
</button>

这样你可以有任意数量的按钮,一次只能选择一个

工作示例: https://stackblitz.com/edit/angular-v9zlaz?file=src%2Fapp%2Fapp.component.html