Angular2: RadioButton Änderungsereignis ist nicht bindend

Question

Hier möchte ich RadioButton einfach mit Änderungsereignis binden. Keine Bibliothek verwenden.

Folgendes funktioniert gut.

<input type="radio" name="test" value="A" (change)="onPropertyChange('test')"> 
<input type="radio" name="test" value="B" (change)="onPropertyChange('test')"> 

Aber dies ist nicht:

<div class="btn-group col-lg-2" data-toggle="buttons" > 
<label *ngFor=" let app of applications; let i = index; " 
     class="btn btn-default " [ngClass]="{'active':(ticket.app == app)}">  
     <input type="radio" id="app{{i}}" name="app" value="{{i}}"     
      checked="{{ (ticket.app == app) ? 'checked' : ''}}" (change)=" 
      onPropertyChange('app')" > 
    {{app}} 
</label> 
</div> 

Während Änderungsereignis Bindung zu bezeichnen, ist es mir alten Wert gibt.

Kann jemand den richtigen Ansatz vorschlagen?

Vielen Dank im Voraus ... !!!

Answer 1

Mit NG2-Bootstrap,

<div class="btn-group col-lg-2"> 
    <label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label> 
</div> 

In .ts Datei,

• Added import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';

• In @Component Anmerkung, gab sie als directives: [ButtonRadioDirective].

Es funktioniert gut. Hoffe, es wird für dich arbeiten.

Answer 2

mit kantigem 2 RC2 ist es nicht mehr erforderlich, um die RadioButtonState zu erstellen:

Radiobuttons können nun Formcontrol Instanz

<form #f="ngForm"> 
    <input type="radio" name="food" [(ngModel)]="food" value="chicken"> 
    <input type="radio" name="food" [(ngModel)]="food" value="fish"> 
</form> 

und teilen:

class MyComp { 
    food = 'fish'; 
} 

Quelle: 5thingsangular - Issue #8

Answer 3

Zwei-Wege ohne eine Bibliothek Bindung:

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items"> 
     <input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" /> 
     {{yourLabelText}} 
    </label> 
</div>