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。