Angular2：RadioButton更改事件不綁定

Question

在這里，我想簡單地將RadioButton綁定到change事件。 不使用任何庫。

以下工作正常。

<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

使用Angular 2 RC2，不再需要創建RadioButtonState：

Radio Buttons現在可以共享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 - 問題＃8

Answer 2

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

在.ts文件中，

• import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';添加了import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';

• 在@Component注釋中，將其作為directives: [ButtonRadioDirective]傳遞directives: [ButtonRadioDirective] 。

它工作正常。 希望它能為你效勞。

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>