Question

我有两个按钮，我想将课程切换到当前单击的按钮。条件是用户一次只能选择一个按钮，并且用户也可以取消选择两个按钮。这是我的代码stackblitz example。我有切换类，但现在我面临取消选择所选按钮的问题。请帮忙。

Answer 1

您需要将按钮的状态存储在某个位置，我将在按钮数组中进行存储：

[
  {class: "fa fa-long-arrow-up", name: "button1", selected: false},
  {class: "fa fa-long-arrow-down", name: "button2", selected: false},
]

我们需要标识带有ID的按钮。参见*ngFor。并点击调用函数以执行其背后的逻辑。模板：

<button *ngFor="let button of buttons; let i = index" class="btn rounded m-4" [ngClass]="button.selected ? 'btn-primary' : 'btn-default'" (click)="selectButton(i)">
    <i [class]="button.class"></i>
</button>

我们反转点击按钮的状态。并关闭所有其他按钮。 TS：

 public selectButton(j: number){
   this.buttons[j].selected = !this.buttons[j].selected;
   for(let i = 0; i < this.buttons.length; i++){
    if(i != j){
      this.buttons[i].selected = false;
    }
   }
 }

https://stackblitz.com/edit/angular-powyop?file=src/app/app.component.ts

Answer 2

HTML

CorrelationId

TS

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

Answer 3

AppComponent

<button *ngFor="let button of buttons; let i = index" class="btn rounded m-4" [ngClass]="(i == buttonNum) ? 'btn-primary' : 'btn-default'" (click)="clickButton($event,i)">
    <i [class]="button.class"></i>
</button>

HTML

{{1}}

将类别切换到角度4中的仅一个按钮

3 个答案: