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

Question

我正在使用 angular 2，我有两个按钮，我想在两个按钮之间切换 class 但是。下面是我的代码

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

我的问题是我想切换 class 但有时只有一个按钮可以 select 并且其他情况是两个按钮都可以取消 select。单击一个按钮时，其他按钮应为 deselect，一旦单击 selected 按钮，该按钮应为 deselect，我只想使用按钮来执行此操作。请帮助

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 点击，并根据是否选择

设置您的 class

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

这样您就可以拥有任意数量的按钮，并且一次只有一个 "selected"

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

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

Toggle class between two buttons in Angular2

html

button

angular5

angular2-forms

angular4-forms