Angular2：RadioButton変更イベントがバインドされていません

Question

ここでは、単にchangeイベントで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> 

ラベル付けするために変更イベントを結合しながら、それは私の古い値を与えています。

誰にでも正しいアプローチを提案できますか？

ありがとうございます... !!! NG2-ブートストラップを使用して

Answer 1

、@Component注釈で

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

• は、directives: [ButtonRadioDirective]としてそれを渡されました。

正常に動作します。それがあなたのために働くことを願っています。アンギュラ2 RC2付き

Answer 2

もはやRadioButtonStateを作成するために必要なのは：

class MyComp { 
    food = 'fish'; 
} 

出典：

ラジオボタンは現在

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

そしてFormControlインスタンスを共有することができます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>