ブートストラップデータトグル属性が変更イベントを無効にします - 角度

Question

私はこのコードのビットを持っている私の角度テンプレートで：

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

私はdata-toggle="buttons"属性を使用すると、私の(change)="changeFilter()をしても起動されません。 radioプレスでdata-toggleの機能を維持し、changeイベントトリガーを使用するにはどうすればよいですか？私がやってしまったことは、私の入力のそれぞれのためのフラグ変数を持っていた

Answer 1

：

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

はその後、私のコンポーネントで私が押されたものに応じてフラグを変更します機能を持っていました。

Answer 2

（それは私のために働いていた）ラベルにクリックイベントをバインドするようにしてください：

<label class="btn btn-default" (click)="changeFilter('1')"> 
    <input type="radio" autocomplete="off">1 
</label>