Angular2：按钮数据绑定NgModel

Question

我正在尝试使用 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>

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。

Angular2：按钮数据绑定NgModel

Angular 2: buttons data binding NgModel

angular

data-binding

2-way-object-databinding