Angular 2：按钮数据绑定NgModel

Question

我正在尝试使用NgModel绑定一些组单选按钮，并将其值放在我的组件中。问题是当我使用＆＃39; data-toggle =＆＃34;按钮＆＃34;＆＃39;我无法捕捉到点击或更改事件。 我该如何解决这个问题？

<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

你可以在这里摆脱// MockUpForm code: public void ClearPanelControls() { panMain.Controls.Clear(); } public void AddControlToPanel(Control c) { panMain.Controls.Add(c); } attr。

data-toggle

您也可以使用ReactiveForms并订阅<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> 。