Question

我正在使用角度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>

我的问题是我想切换班级，但有时只能选择一个按钮，而其他情况是可以取消选择两个按钮。在单击一个按钮时，应取消选择另一个按钮，并且在单击所选按钮后，应取消选择该按钮，而我只想使用按钮来执行此操作。请帮助

Answer 1

您可以使用此模式，该模式适用于任意数量的按钮：

在您的控制器中，设置按钮数组和一个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
    }
}

然后，模板中的selectedButton会在点击时填充，并根据是否选择了类别来设置您的班级

<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

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

1 个答案: