Angular 6 - радио кнопки Bootstraps

Question

В настоящее время я пытаюсь применить подход с использованием кнопок начальной загрузки в моем проекте Angular 6.Вы можете применить в группе кнопок активное состояние кнопки, и каждый раз, когда нажимается другая кнопка, активное состояние переключается на нажатую кнопку.Трудно описать словами, но вот документация по начальной загрузке (самый последний раздел): Документ по начальной загрузке

Я добавил это в представление компонентов:

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

Но активное состояние не переключается с кнопки на кнопку при нажатии ... Может быть, кто-то может помочь мне в этом:)

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