Angular 6 - 引导单选按钮答案

【问题标题】：Angular 6 - Bootstraps radio buttonsAngular 6 - 引导单选按钮
【发布时间】：2018-11-16 20:38:48
【问题描述】：

我目前正在尝试在我的 Angular 6 项目中应用引导单选按钮方法。您可以在按钮组内应用按钮的活动状态，然后每次单击另一个按钮时，活动状态都会切换到单击的按钮。有点难以用语言描述，但这里是引导文档（最后一节）：Bootstraps doc

我将此添加到组件视图中：

  <div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success active">
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

但是活动状态不会通过单击从按钮切换到按钮...也许有人可以帮助我解决这个问题:)

【问题讨论】：

标签： angular html bootstrap-4

【解决方案1】：

复选框的活动状态根据 css 类更改。在您的情况下，只要用户单击按钮，就需要更改活动。你可以通过一个变量说currentButton来实现。

<div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success" 
            [ngClass]="{active : currentButton == 'first'}"
            (click) = "currentButton='first'"
             >
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success"
             [ngClass]="{active : currentButton == 'second'}"
            (click) = "currentButton='second'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified"
            [ngClass]="{active : currentButton == 'third'}"
            (click) = "currentButton='third'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

在ts中

public currentButton = "first"; //<-- you can change the default as per your requirement.

【讨论】：