Angular2: событие изменения RadioButton не является обязательным

Question

Здесь я хочу просто связать RadioButton с событием изменения. Не использовать какую-либо библиотеку.

Следующие работы отлично.

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

Но это один не является:

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

Хотя связывания события изменения маркировать, это дает мне старое значение.

Может ли кто-нибудь предложить правильный подход?

Заранее спасибо ... !!!

Answer 1

Использование NG2-самозагрузки,

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

В .ts файл

• Добавлено import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';

• В @Component аннотацию, передал его в directives: [ButtonRadioDirective].

Он отлично работает. Надеюсь, это сработает для вас.

Answer 2

С угловыми 2 RC2 он больше не нужен для создания RadioButtonState:

Радио Кнопки теперь могут обмениваться экземпляру FormControl

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

И:

class MyComp { 
    food = 'fish'; 
} 

Источник: 5thingsangular - Issue #8

Answer 3

двухстороннего связывания без библиотеки:

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