Angular 2: Schaltflächen Datenbindung NgModel

Question

Ich versuche, einige Gruppenradios mit NgModel zu binden und ihre Werte innerhalb meiner Komponente zu nehmen. Das Problem ist, dass wenn ich 'data-toggle = "buttons"' verwende, ich das Klick- oder Änderungsereignis nicht abfangen kann. Wie kann ich dieses Problem lösen?

<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

Sie können hier von data-toggle attr loszuwerden.

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

Sie können auch Sie ReactiveForms und abonnieren Sie valueChanges.