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