角2：ボタンのデータバインディングNgModel

Question

いくつかのグループラジオボタンをNgModelにバインドして、それらの値をコンポーネント内で取得しようとしています。問題は、 'data-toggle = ""ボタンを使用すると、クリックイベントや変更イベントを捕捉できないということです。 この問題を解決するにはどうすればよいですか？

<div class="col-md-6"> 
<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-default active"> 
    <input type="radio" [(ngModel)]="period" (click)="dec()" value="yesterday" name="options" id="option1" autocomplete="off" checked> Yestedray 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" [(ngModel)]="period" value="today" name="options" id="option2" autocomplete="off"> Today 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" [(ngModel)]="period" value="currentMonth" name="options" id="option3" autocomplete="off"> January 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" [(ngModel)]="period" value="last6Months" name="options" id="option3" autocomplete="off"> Last 6 Months 
    </label> 
    <label class="btn btn-default"> 
    <input type="radio" [(ngModel)]="period" value="lastYear" name="options" id="option3" autocomplete="off"> Last Year 
    </label> 
</div> 

Answer 1

あなたはここにdata-toggleのattrを取り除くことができます。

<label class="btn btn-default" [class.active]='period === "yesterday"'> 
    <input type="radio" [(ngModel)]="period" value="yesterday" name="options" id="option1" autocomplete="off" checked> Yestedray 
</label> 

また、ReactiveFormsとvalueChangesを購読することもできます。