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

Question

我使用的是angular 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