Javascript 引导数据切换属性禁用更改事件-角度

在我的角度模板中，我有以下代码：

  <div class = "btn-group" data-toggle="buttons">
    <input type="text" class = "form-control" [(ngModel)]="siteFilter[filterType]" placeholder="Refine Search">
    <label class="btn btn-default">
        <input type="radio" (change)="changeFilter('1')" autocomplete="off">1
    </label>
    <label class="btn btn-default active">
        <input type="radio" (change)="changeFilter('2')" autocomplete="off" checked>2
    </label>
    <label class="btn btn-default">
        <input type="radio" (change)="changeFilter('3')" autocomplete="off">3
    </label>
</div>

1.
2.
3.

---

当我使用

data toggle=“buttons”

属性时，我的

（change）=“changeFilter（）

甚至不会被触发。我如何保持

数据切换功能，并在
单选按钮上设置
更改事件触发器？
我最后做的是为我的每个输入设置一个标志变量：

[ngClass]="nameFilterActive ? 'btn btn-default active': 'btn btn-default'

然后，在我的组件中，我有一个函数，可以根据按下的内容更改标志。
尝试将单击事件绑定到标签上（它对我有效）：


1.
< /代码>您可以考虑使用（角4 +引导4）。可以为您提供所需的功能。请参阅。是的，事后看来，我应该从一开始就使用
ng bootstrap
，但我更希望现在不必转换整个应用程序。是否有一种方法可以使用
ng bootstrap
，而不影响我的其他bootstrap 3要素？我没有太多经验使用Bootstrap，但我怀疑您是否可以将Bootstrap 3（CSS+jQuery）与ng Bootstrap（Bootstrap 4 CSS，不使用jQuery）混合使用。将两者混合使用可能比转换为ng Bootstrap和更复杂。我相信我已经尝试过了。这通常是可行的，但是否适用于
data toggle=“按钮“
？是的，我有办法解决这个问题；然而，我使用的是Bootstrap4。经过几个小时的搜索，这对我有效。引导3。谢谢
<label class="btn btn-default" (click)="changeFilter('1')">
    <input type="radio" autocomplete="off">1
</label>