Angular 2：按钮数据绑定 NgModel答案

【问题标题】：Angular 2: buttons data binding NgModelAngular 2：按钮数据绑定 NgModel
【发布时间】：2017-07-22 06:27:33
【问题描述】：

我正在尝试将一些组单选按钮与 NgModel 绑定，并在我的组件中获取它们的值。问题是当我使用 'data-toggle="buttons"' 时，我无法捕捉到点击或更改事件。我该如何解决这个问题？

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

【问题讨论】：

标签： angular data-binding 2-way-object-databinding

【解决方案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。

【讨论】：